Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 8, 2025 at 9:47 pm #1486477
    GWS

    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 #1486492
    Ismael

    Hey 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;
   }
}

    View post on imgur.com

    Best regards,
    Ismael

    July 9, 2025 at 11:15 am #1486506
    Guenni007

    which 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: none

    so 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 #1486512
    Guenni007

    my 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.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.