How to make the mobile menu fixed to top when scrolling?

Hey DROR,

Add this to quick css:

.av-hamburger{
    position: fixed!important;
    background: #fff!important;
    padding: 0px 0px!important;
    border-radius: 80px!important;
    width: 80px!important;
    height: 80px!important;
}

Best regards,
Jordan Shannon

Hi bakbek,

Can you try adding this css code in QUick CSS (Located in Enfold > General Styling):

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

  .responsive #top #main {
    padding-top: 80px !important;
  }
}

Best regards,
Nikko

Hi,

Yes each site would need its own unique implementation based on classes, id, etc.

Best regards,
Jordan Shannon

Hi bakbek,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (max-width:767px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        position: fixed;
    }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

Add this to the very top of quick css so that it runs first:

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

  .responsive #top #main {
    padding-top: 150px !important;
  }
}

Best regards,
Jordan Shannon

Hi bakbek,

I have checked your site on my phone and the code works properly.
I could see the mobile menu fixed on top even when I’ve scrolled the page.

Best regards,
Nikko