Sticky menu on mobile

Hey northorie,
Typically a sticky header would be achieved with this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

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

but if you only want a sticky burger icon you could try this:

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

If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike

Hi,

Are you looking to change the colour of the lines, or to have a background behind them?

Best regards,
Rikard

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

.av-burger-menu-main a {
  background: red;
  padding-right: 10px;
}

.av-hamburger-inner, .av-hamburger-inner:after, .av-hamburger-inner:before {
  background-color: blue;
}

Best regards,
Rikard

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 500px) { 
.responsive #top #wrap_all #main {
        padding-top: 81px !important;
    }
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Perhaps you have an error in your css like a missing bracket, the css above doesn’t change the position, it only adds padding. Try removing the code above and add it to WordPress ▸ Customize ▸ Additional CSS, perhaps you should also check your custom css with a css validator for a missing bracket.
If it still doesn’t work then remove it so your site works as before, and include a admin login in the Private Content area so we can examine.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike