Docs

[Bark201]

On pc the menu is sticky but on mobile devices only the logo is sticky, the hamburger menu is not. How do I make the hamburger menu (top menu) sticky on mobile devices? The logo is sticky already. By sticky I mean when you scroll down the page on mobile devices the logo is still displayed but the menu isnt. I hope I am clear.

[Bark201]

I searched the forum after I posted this and saw the following css:

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}

That makes the menu sticky, but in one page I have an image inside the content at the top and when its scrolled down on a mobile phone and then scrolled back to the top the logo is covering the image. This didnt happen before so I`m assuming its because of that CSS. How do I exclude one page or multiple pages from the sticky navigation menu on mobile phones?

[Rue Nel]

Hello There,

Thanks for writing in! To exclude a page or multiple pages, please have the code updated and use this instead:

@media (max-width: 979px) {
  .page-id-123 .x-navbar-fixed-top,
  .page-id-456 .x-navbar-fixed-top {
    position: fixed !important;
  }
}

Please noticed that we are using a custom class .page-id-{ID} which denotes the page ID number. To know where you can find the page id number, please check it out here: https://community.theme.co/kb/how-to-locate-post-ids/

Hope this helps.

[Bark201]

I tried it, it fixed it on that page but the sticky menu stopped working on other pages that I didnt exclude, all of them by the looks of it. Please help.

[Christopher]

Hi there,

Please update your code:

@media (max-width: 979px) {
  body:not(.page-id-123) .x-navbar-fixed-top,
   body:not(.page-id-456) .x-navbar-fixed-top {
    position: fixed !important;
  }
}

Now menu should be fixed on all pages except on pages with IDs 456 and 123.

Hope it helps.

[Bark201]

Yes, that fixed it, thank you.

[Christopher]

You’re welcome.

[Author]

Posts