[Resolved] Floating menu not floating on sticky scroll

[Simon]

Hi,
I’m am trying to set up a single page site with a sticky floating off canvas menu to jump to different sections of the page. However when I scroll the menu stops floating and becomes a top bar, and when I scroll back to the top it floats again.

I would really appreciate some help with this

best regards

Simon

[David]

Hi there,

if you disable the Sticky Navigation on Desktop and try adding this CSS:

.main-navigation {
    position: fixed;
    top: 60px;
    right: 60px;
}

[Simon]

Hi David,
Thanks for the rapid response. I’ve tried your suggestion and it although it works, the off canvas slide in doesn’t work if set to the same side of the screen. And also it negatively affects the mobile layout.

I appreciate your help, but I think I will just use a standard navigation menu and set the background to transparent. Not exactly what I wanted, but acceptable,

Thanks again

Simon

[David]

oh sorry about that – it worked in the developers tools – but personally i try to ‘not’ change the nav too much in case some devices don’t like it.

[Author]

Posts