Sticky navigation bar

stgilescathedral · Member · Apr 29, 2020 at 12:23 pm
Copy link

Add topic to favorites
Hello,

I would like to make the main navigation bar sticky, but when I try:

.main-navigation {
bottom: 0;
position: sticky;
}

Nothing happens.

Can anyone help?

The blog I need help with is: (visible only to logged in users)
staff-mckluskey · Staff · Apr 30, 2020 at 11:33 am
Copy link
Hi there!

Could you elaborate a little on what exactly are you trying to achieve?
Do you want your menu to keep visible even when scrolling the site? If so, I’d recommend changing your theme to one that has a fixed menu. You can see those themes here:

https://wordpress.com/themes/filter/fixed-menu/

Also, remember that with your plan you can access Live Chat directly via https://wordpress.com/help/contact. That way you can get help faster.
stgilescathedral · Member · Apr 30, 2020 at 3:05 pm
Copy link
Hi Fresatomica,

Ideally, I’d like the menu to be at the bottom of the page when first accessing the site, then when someone scrolls, it moves to the top of the page as they scroll, and stays at the top as they scroll further.
(Like number 5 on this page https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/)

I would use live chat, but I’m doing a few things at the moment, so I can’t devote my attention to it. Thanks for the suggestion though!
supernovia · Staff · Apr 30, 2020 at 9:05 pm
Copy link
The problem is that the element is still relative to its parent.

In this theme, the navigation is within .site-header. It’s already at the bottom of that, so when the site header scrolls off the screen it scrolls along with it.

You can see this in action with the following CSS, which lets it stick to the top of its parent element so long as that parent element is still on the page:
```
nav#site-navigation {
    position: sticky;
    top: 30px;
}
```
Getting around this with CSS may be possible with some z-index magic, but it is outside the scope of our support — you’d need to hire a developer to put some hours toward sorting out out. We recommend UpWork.com if you’re interested in custom development.

Or, you’d be welcome to tinker more with it if you’re able. But I’d recommend starting with a theme that does close to what you want, as you’ll have an easier time moving that menu as you like.

Hoping this helps!
stgilescathedral · Member · May 1, 2020 at 8:12 am
Copy link
Ah, I see thank you for your help. That’s why I have been going mad trying everything I can.

Thanks for the pointer on developers, if I can’t get anywhere, I may well turn to them. Thank you for your help.

No items found.