Archived topic

Floating menu not floating on sticky scroll

3 replies · Started by Simon on February 20, 2020

Viewing posts 1–4 of 4

February 20, 2020 at 5:30 am #1171348

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

February 20, 2020 at 7:47 am #1171673

Hi there,

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

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

February 21, 2020 at 3:43 am #1172388

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

February 21, 2020 at 5:06 am #1172448

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.

This archived topic is closed to new replies.

Start building better websites today.