Menu drawer not fixed at top of page

[duncmoran]

Hi,

On laptop sized screens (980x1199 px breakpoint) the burger menu drawer overlays the content. Whenever we click a scroll anchor the drawer remains open and overlayed so no content is readable.

On smaller breakpoints the menu stays ‘sticky’ at the top of the page so scrolling to the anchor works fine. How do we replicate this functionality on the laptop screensize?

Thank you

[ruenel]

Hello @duncmoran,

Thanks for writing in! We can see that you have added this custom CSS.

@media (max-width:1545px){
   .masthead-stacked .x-navbar{
       text-align:center;
   }
   .masthead-stacked .x-btn-navbar{
       display:inline-block;
   }
   .x-nav-wrap.desktop{
       display:none;
   }
   .x-nav-wrap.mobile{
       display:block;
   }
   .x-nav-wrap.mobile.x-collapsed{
       display:none;
   }
}

You must include the position of the navbar which is sticky. Normally, the code that makes the navbar as sticky is this:

.x-navbar-fixed-top{
    position: fixed;
}

You may change the position from fixed to relative so that the menu will scroll away along with the page.

Be advised that this is customization and beyond our support already. You will be the one who will maintain the code for your custom CSS.

Hope this makes sense.

[duncmoran]

@ruenel

.x-navbar-fixed-top{
    position: relative;
}

I changed this to relative and it worked thank you

[ruenel]

You’re welcome!
It’s good to know that it has worked for you.