Community forum for knowledge and support

Updated 2 months ago

Troubleshooting Navbar Component Behavior and Styling Issues

At a glance

The community member has converted their navbar to a component, but it's behaving differently on different pages. Certain links are suddenly inheriting more styling, which seems to happen when the community member changes the Link type in the dropdown to Page and selects the Page. This is causing issues with the text color and other styling. The community member also wants to know how to widen the selector as some of the text is spilling off the screen.

In the comments, another community member suggests recording a loom for better explanation. Another community member believes the issue is related to the Webflow applying the Current class to a link when the user is on the same page the link points to, causing the style settings to be lost.

A third community member recommends watching a video on combo classes, which might help clear up the confusion. They also suggest sharing a read-only link to the Webflow Designer if the community member continues to run into issues.

Useful resources

I've converted my navbar to a component, but it's behaving differently on different pages, certain links are suddenly inheriting more styling, this seems to happen when I change the Link type in the dropdown to Page and select the Page, it really screws things up (text colour etc) -- any ideas what's going on? Also how do I widen the selector as some of the text is spilling off the screen?

A
J
M
3 comments

Please record a loom for better explaination

Sorry, I think the problem I'm running into is when the Webflow applies the Current class to a link (when I'm on the same page the link points to) the style settings I have selected are being lost.

I would watch this super quick video on combo classes, it might help clear up some of this confusion.

https://university.webflow.com/lesson/web-styling-using-classes?topics=layout-design

If you continue to run into issues, please share a read-only link (Under the Share button, top right in the Webflow Designer). Thanks! πŸ’ͺ

Add a reply
Sign up and join the conversation on Slack