Visual theme: Floating Navigation Menu
-
Can I add some CSS to have a floating (“pinned”) Navigation menu?
At the moment, once my reader scrolls down a post page, the Nav menu disappears. Thus, there is no way to get to the nav menu on my site, without scrolling all the way back up to the top of the page – not optimal for usability.Many thanks!
The blog I need help with is: (visible only to logged in users)
-
Just to add to the above, I’d like the menu to become fixed after scrolling off the image if it’s possible?
-
Hi, try the following custom CSS and see what you think.
#page { position: relative; } .site-header { position: fixed; } -
Hi @thesacredpath,
Thank you. This moved my posts to the top of my page and placed (hid) my header image and nav bar behind my posts.
I only want to display the nav bar (and its container) at the top of my page, once the user starts to scroll down the page. I don’t want to take up page space with my Header image, once scrolling.
Also, if I change this code, will the WP Admin Bar hide my fixed bar at the top of the page? I’ve read a few instance online where the Admin Bar plays up.Thanks again for your help!
-
Hmmm, when I worked out the code, I don’t think you had a header image, or did you change themes?
-
I’ve always had a header image; since I launched the site.
I’ve only changed themes once but that was back in January 2015 (or earlier, I think). Although the same theme, I have customised the CSS quite a bit.
-
Thanks for the clarification. Perhaps my browser didn’t load your header image or something as I saw the menu right at the top below the admin bar and no header image. The web can be fickle. Anyway, give the following a try and see what you think. Since this code causes the touch menu, which activates at 600px and narrower, to go awry, I’ve used a Media Query to limit this to widths where the full menu shows.
@media screen and (min-width: 601px) { #page { position: relative; } .navigation-main { margin-top: 46px; position: fixed; top: 0; background: #292929; z-index: 10; } .site-header { padding-top: 22px; } } -
Hmmm…that’s not good and hope it’s not something wrong with my header image.
I tried the code but the menu isn’t what I was hoping to achieve as this displayed the nav bar to the left and only at half the page’s width. Also, when you scroll down, the nav bar is fixed to display a couple of inches down the page and not fixed right at the top of the page.
I’d like to have my header image and nav bar display as they are now, when a reader lands on my Home page or a post. Then, once the reader starts to scroll down my Home page or a post, I’d like the nav bar (and container, not transparent) fixed right at the top of the page.
I’ve played around with the spacing, but can’t get it to move to the very top.
This is what I’m trying to achieve with my nav bar: FStoppers But the menu on the right-side of the page as I have it now.If it’s not possible, then I’ll leave it as is, thanks again for your patience. :)
-
I’d like to have my header image and nav bar display as they are now, when a reader lands on my Home page or a post. Then, once the reader starts to scroll down my Home page or a post, I’d like the nav bar (and container, not transparent) fixed right at the top of the page.
That affect is typically done with some sort of scripting such as Javascript or jQuery and not something we can do with only CSS.
-
Ok, shame, but thank you for following that up for me.
Is there any way that I can add a floating side menu that replicates just my nav bar as the reader scrolls down the page? Widget?
Thanks again -
In the visual theme, if we did a floating custom menu widget, it would obscure some of your content. Also, the sidebar does not show on the posts page (your main page) so we can’t really do it. The sidebar would have to exist on that page for us to be able to do that.
-
Thanks again…guess I’m stuck with the nav bar right at the top of the page and nothing else, as I don’t want to change my theme. Apart from the nav bar, I have it working and displaying the way I want.
I’m purchasing a WP theme to replace my Photography site, which is very outdated as I built 5+ years’ ago, so I’ll keep this in mind for this next theme.
Fun and games ahead and hope WP.org has great support like you guys offer! -
Hi
How to undisplay this text in my website?
Please check the text I need them undisplay below.
-
Hi @vierelf, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.
-
-
-
@thesacredpath I’ve done a little more research and wondered if I can use the following in some way instead of what I was after?
.slicknav_menu {
display:none;
}@media screen and (max-width: 40em) {
/* #menu is the original menu */
.js #menu {
display:none;
}.js .slicknav_menu {
display:block;
}
} -
Hi, not sure where you got that code, but right now I can’t see a way to make that work in Visual. It appears as if they have created a new menu and are substituting that one for the original. Since we can’t edit the theme files, there isn’t a way for us to add the .slicknav_menu stuff to the theme.
-
- The topic ‘Visual theme: Floating Navigation Menu’ is closed to new replies.
WordPress.com Forums 