Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • May 31, 2022 at 8:56 pm #1353622
    Veronika

    Hi,

    I already enabled Sticky Header in Enfold > Header > Header Behavior . It worked for the desktop version perfectly.

    Unfortunately, it does not apply to the mobile and iPad version. How do I change this?

    Thank you,

    Veronika

    June 1, 2022 at 8:59 am #1353690
    Rikard

    Hey Veronika,

    Please refer to this: https://kriesi.at/documentation/enfold/header/#sticky-header-on-mobile

    Best regards,
    Rikard

    June 1, 2022 at 12:27 pm #1353729
    Veronika

    Hi Rikard,

    I already tried that, but when I do, it looks like this: https://imgur.com/XoIFqPy

    The burger menu is changed, a white header is added and it is not sticky to the top

    Thank you for further instructions

    Best,
    Veronika

    June 1, 2022 at 12:45 pm #1353735
    Veronika
    This reply has been marked as private.
    June 2, 2022 at 8:47 am #1353874
    Ismael

    Hi,

    Thank you for the update.

    Would you like to adjust the breakpoint of the content slider entries as well and make the entries full width? Try to include this css code.

    @media only screen and (max-width: 768px) {
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.first {
    margin-left: 0;
    width: 100%;
}
}

    Best regards,
    Ismael

    June 2, 2022 at 12:36 pm #1353904
    Veronika

    Hi,

    unfortunately the burger menu is still not fixed on my mobile version

    Thank you very much

    Best,

    Veronika

    • This reply was modified 2 years, 5 months ago by Veronika.
    June 2, 2022 at 12:38 pm #1353906
    Veronika
    This reply has been marked as private.
    June 5, 2022 at 5:58 pm #1354237
    Mike

    Hi,
    Thanks for your patience, I adjusted your css a little to correct the burger icon and the search icon and added this to make your mobile header sticky:

    @media only screen and (max-width: 767px) {
.responsive.html_header_top.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }
}

    2022-06-05_114502.jpg
    Note that once you scroll some the header is not transparent, thus the white header background, this is the correct behavior and the desktop version also does this.
    Please clear your browser cache and check.

    Best regards,
    Mike

    June 16, 2022 at 6:53 pm #1355535
    Veronika

    Hi Mike,

    I would like to have always a transparent header. And there is a movement on my logo, how do I remove it? https://imgur.com/4XQS9Gq

    Thank you very much!

    Best,
    Veronika

    June 16, 2022 at 7:05 pm #1355536
    Mike

    Hi,
    Do you always want the transparent header on desktop also or just mobile?
    Will this be for all pages?

    Best regards,
    Mike

    July 5, 2022 at 10:43 am #1357265
    Veronika

    Hi Mike,

    yes the header should always be transparent.

    Unfortunately the burger menu and the search icon have the wrong alignment!
    It should look like this: https://imgur.com/jitTxBx Aligned underneath each other, on Ipad, mobile and Web version

    The logo should disappear on the mobile version only, when scrolling. I’d like to keep it fixed on my iPad and web version. (das logo sollte auf der handy version nicht mit scrollen, sondern verschwinden. Nur auf der Webversion und iPad version sollte es fixiert bleiben wie das burger menu und das such-icon)

    Thank you for your help

    Best,

    Veronika

    July 5, 2022 at 1:07 pm #1357273
    Mike

    Hi,
    Sorry I thought the menu and search icon being stacked was an error, I returned it to the way it was and I made the mobile logo disappear on the mobile version only, when scrolling.
    Please check.

    Best regards,
    Mike

    July 5, 2022 at 5:39 pm #1357303
    Veronika

    Hi Mike,

    it looks great, thank you. There is only two things left:

    – on the iPad version, there seems to be a problem: https://imgur.com/lxVvItb

    – the burger menu and the search icon are displaced. I tried this:

    .av-hamburger {
    padding-top: 0px;
    padding-right: 15px;
    }

    #menu-item-search > a:nth-child(1) {
    padding-right: 3px;
    top: 40px;
    }

    but it did not work

    Thank you

    Best,
    Veronika

    July 5, 2022 at 5:41 pm #1357305
    Veronika
    This reply has been marked as private.
    July 6, 2022 at 6:40 am #1357351
    Nikko

    Hi Veronika,

    Please try adding this CSS code in Quick CSS:

    @media only screen and (max-width:767px) {
  .html_burger_menu_active #top #wrap_all #header #avia-menu .av-burger-menu-main.menu-item-avia-special > a {
    top: 0 !important;
  }

  .av-burger-menu-main.menu-item-avia-special .av-hamburger {
    line-height: 50px;
    padding: 15px 25px;
  }

  .html_burger_menu_active #top #wrap_all #menu-item-search > a {
    top: 40px;
  }
}

    Best regards,
    Nikko

    July 6, 2022 at 11:11 pm #1357465
    Veronika

    Hi Nikko,

    I added the code to the quick CSS and to custom CSS, unfortunately, both did not work.

    Any recommendations?

    Thank you

    Best,
    Veronika

    July 7, 2022 at 2:56 am #1357485
    Nikko

    Hi Veronika,

    I checked it on my mobile phone and it lifted the burger menu and the search icon:

    Best regards,
    Nikko

    July 7, 2022 at 3:50 pm #1357560
    Veronika

    Hi Nikko,

    I already figured it out, thank you

    You can close this now.

    Best,
    Veronika

    July 7, 2022 at 4:15 pm #1357571
    Nikko

    Hi Veronika,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘sticky burger menu mobile/Ipad version’ is closed to new replies.