[Resolved] Sticky Menu Position

[CG Klein]

Hello,

I am using the flowing css to make the top bar sticky and want the primary menu to go underneath when it becomes sticky. Please help!

.top-bar {
position: sticky;
z-index: 999;
top: 0;
left: 0;
right: 0;
}

Thank you,
cgk

[Tom]

Hi there,

Try this:

.navigation-stick {
    top: 45px !important;
}

[CG Klein]

Hello,

Worked great!

Thank you much!
cgk

[CG Klein]

Hello,

I spoke to soon, needs different value to work on mobile and dos not work with hide when scrolling down.
Any ideas?

Thanks again,
cgk

[CG Klein]

Hi,

Maybe something like this,

}
.sticky-mobile-header {
top: 90px !important;
}

Thanks,
cgk

[Tom]

You’ll need to write a media query to increase or decrease the top value on mobile:

@media (max-width: 768px) {
    .navigation-stick {
        top: 90px !important;
    }
}

What about it doesn’t work when the nav only appears when scrolling up?

[CG Klein]

OK,

That css worked for the mobile with 80px.

The hide when scrolling down dose not hide but shows menu when scrolling down on both desktop and mobile.

Thank you,
cgk

[CG Klein]

Also the top bar diapers when using the side-out menu and not at the top of the screen.

[CG Klein]

This is what I have so far.

.top-bar {
position: sticky;
z-index: 999;
top: 0;
left: 0;
right: 0;
}
.navigation-stick {
top: 45px !important;
}

@media (max-width: 768px) {
.navigation-stick {
top: 55px !important;
}
}

@media (max-width: 420px) {
.navigation-stick {
top: 80px !important;
}
}

@media (max-width: 320px) {
.navigation-stick {
top: 115px !important;
}
}

[Tom]

Instead of position: sticky;, try position: fixed;

As for the hide when scrolling down, I’d need to see it to come up with the fix.

[CG Klein]

When I use “fixed” it places menu under top bar unless I scroll down.
I can make you a login if you would please take a look.

https://www.kosirs.com/wp-admin/

[Tom]

I’m getting this message while trying to set the password: Sorry, your request cannot be accepted.

[CG Klein]

ip block i will disable for CA

[Tom]

Got it.

Add this:

body {
    padding-top: 45px;
}

That will allow you to use position: fixed; instead of position: sticky;

Then instead of top: 45px !important; use margin-top: 45px !important;

[CG Klein]

That dose allow me to use fixed so the top bar dose not disappear on mobile when using side-out menu but the spacing is off on mobile. The hide when scrolling down dose not work on desktop or mobile.

[Author]

Posts