In have a nav bar on my site, I dont have it on the home page, on page two I would like it to have different buttons to that on page 3. I try hiding it on page one but then it disappears from all pages. Ive try to copy in on different pages and create different combo classes but it still stays the same on all pages - I know creating different combo classes works on other things but doesnt seem to for nav bar?
Recap:
Page 1 - have no nav bar
Page 2 - Have the nav bar with certain links
Page 3 - Have nav bar with different link than page 2
The nav is a symbol = the same design/layout in all pages. In general (Most of the times) from UI aspect - it’s wrong to create different navbars with small tweaks (break Consistency):
For 3 different navbars, you should create 3 different symbols
-Or- solve this by custom CSS code on a specific page (And use one navbar/symbol)
<style>
/*before body of specific page */
a.unwanted-link{
display: none;
}
</style>
This is pretty straightforward, basically for any page you’re not wanting a navbar you can remove it completely by clicking on it and pressing Backspace (or right clicking and going down to Delete).
Because your nav bar is currently a Symbol we’ll need to break it before making changes otherwise it will override all instances around the website. To do that, just duplicate what you have (CTRL+C or right click and go to Copy), paste the copy onto your page (CTRL+V or right click and go to Paste - however keep in mind it will be stacked below your original instance) and then right click the Symbol and go to Unlink. You can now go to the Navigator pane and delete your duplicate nav Symbol, and start editing your new instance of the second nav layout. If you plan on using this around on other pages, just be sure to create a new Symbol and you’re good to go!
If you’re having problems you can follow my quick video recording here. Don’t hesitate to ask if you run into any issues.
Edit: It looks like @Siton_Systems beat me to replying, however his response does cover some of the reasons why you may want to reconsider this type of change. If you end up wanting to continue with the changes you had in mind, feel free to follow what I wrote above
I have a sort of related question: In my client’s Nav Bar I have a link to a Client List page. When the user clicks on that link to go to that page, I’d like to hide the menu item that says “Client List,” reason being the user already knows they’re on that page (and there’s also a large header that says “Client List.”)
Alternately, some kind of underline or similar highlighting on this Nav Bar menu item indicating that this is the current page might also be agreeable.
Normally I’d recommend creating a new post (to keep things on topic — especially given the age of this post), but given the question I figured I’d give you a quick response here.
Webflow automatically adds a Current combo class to any links that share the same URL as the active page, so if you point that menu link to the Client List page you’ll notice a special green combo class in the Selector field:
You can now style this link class however you’d like and now every menu link that points to the active page will have that same styling
I’d recommend against removing any links based on the page, so adding an underline (or bottom border) is the better option here — plus this is expected behavior when viewing a page that exists as a link in your main navigation.
