Visual theme: Floating Navigation Menu

nilla2014 · Member · Nov 25, 2016 at 2:15 pm
Copy link
This nav menu is what I am trying to create. This is also a WP theme but maybe I need to change.
siobhyb · Member · Nov 25, 2016 at 4:55 pm
Copy link
Hi @nilla2014,

You could try the following custom CSS to fix the menu at its current position in Visual:
```
@media screen and (min-width: 1035px) {
    #masthead {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 999;
    }

    .site-main {
        margin-top: 101px;
    }
}
```
If you’d like your menu to appear at the very top of the page, however, then another theme that acts that way be default may suit you better. You can filter for themes in our repository that have a fixed menu here:

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

Let me know how you get on with your search or if any other questions come up.
nilla2014 · Member · Nov 25, 2016 at 7:51 pm
Copy link
Thanks for your help but I tried this code before and it freezes my header image also. I wanted only the menu to display permanently at the top of the page after scrolling down off the header, regardless of what post/page my reader was displaying.

I don’t want to change themes as I’ve done a lot of Customisation on this one so I’ll have to be happy with what I have.
kathrynwp · Staff · Nov 25, 2016 at 8:10 pm
Copy link
I don’t think that’s going to be posssible with Visual with just CSS, I’m afraid.

I realize you would prefer not to switch themes, but if the fixed menu is important to you, you might want to look at Dyad, another free grid-based theme, but with a fixed menu.

https://dyaddemo.wordpress.com/
seunadetunji · Member · Nov 25, 2016 at 9:43 pm
Copy link
Not to butt in, but I believe what she’s trying to achieve is the bar in https://gatewaydemo.wordpress.com/

I know because I need help with this too :-)
kathrynwp · Staff · Nov 25, 2016 at 9:49 pm
Copy link
Right, I understand – thanks for pointing to that example. :) The Gateway effect is not possible to achieve with CSS alone – there’s some JavaScript mixed in there too, which isn’t something we can add in the CSS editor.
nilla2014 · Member · Nov 25, 2016 at 9:50 pm
Copy link
Both the nav bar in or are OK. However, @kathrynwp and @thesacredpath both say I can’t with Visual. Sadly, this was an oversight on my part when I was selecting my theme.

No items found.