
Tagged: logo and widgets on mobile
-
AuthorPosts
-
July 8, 2025 at 9:47 pm #1486477
Hi,
We’ve added a Donate widget button to the header of a website and it looks fine on desktop, but on mobile it is positioned in the center above the logo and mobile menu burger. We’d like the logo to be at the top on mobile and larger than it is now. Then below that, the donate button below it and then the burger menu. Can you please provide guidance on how to make this happen?Also, is it possible to display the social media icons in the header of the mobile version?
July 9, 2025 at 5:42 am #1486492Hey GWS,
Thank you for the inquiry.
You can add this css code to move the donate button below the logo on mobile view.
@media screen and (max-width: 768px) { .header_main { display: flex; flex-direction: column; } .widget_text { order: 2; } .av-logo-container { order: 1; } .header_main_alternate { order: 3; } #header_main #custom_html-22 { margin-top: 0 !important; padding: 10px 0; } }
Best regards,
IsmaelJuly 9, 2025 at 11:15 am #1486506which hook do you use to have that widget?
____________
next hint: header_main_alternate is an ID so use as selector #header_main_alternate
and you do not need to put it in account because in responsive case it is at display: noneso you do not need to set order!
it is enough if you go and set flex-direction to column-reverse to bring the button below logo container.@media only screen and (max-width: 989px) { #header #header_main { display: flex; flex-wrap: wrap; flex-direction: column-reverse; } }
btw. it is a good practice if you choose even values for min-width and odd values for max-width.
July 9, 2025 at 1:16 pm #1486512my solution – a little adjust of css from ismael – but easiest way is to remove it – and remove please the rule:
#header_main .widget { display: flex; align-items: center; margin-left: 85%; margin-top: 2%; position: absolute; }
now try:
@media only screen and (min-width: 1430px) { #header #header_main { width: 1430px; margin: 0 auto; } } @media only screen and (min-width: 990px) { #header #header_main { display: flex; flex-flow: row wrap; justify-content: space-around; } #header #header_main > * { flex: 1 1 auto; align-self: center; width: unset; } #header #header_main .av-logo-container { flex-basis: calc(100% - 170px); flex-grow: 1; order: 1; max-width: unset; } #header #header_main .widget { margin-right: 50px; flex-grow: 0; flex-basis: 120px !important; order: 2; display: flex; justify-content: center; } #header #header_main #header_main_alternate { flex-basis: 100%; order: 3; border-top: none; } } @media only screen and (max-width: 989px) { #header #header_main { display: flex; flex-flow: wrap column-reverse; } #header #header_main .widget { margin-top: 0px; padding: 10px 0 !important; } }
sadly we loose with this the border-top of #header_main_alternate – or you can live with it that the border-top does not have the full screen-width.
then remove that border-top: none line. -
AuthorPosts
- You must be logged in to reply to this topic.