▼
Streaming live at 10am (PST)

Nav links can't inherit text styling

#1

Setting color on navbar or nav menu is not inherit on nav links or dropdowns.

Fair enough if the links not inheriting from parent comes down to them having to be inherit from all links (a tag CSS) for designer UX reasons like with other links but if that is the intended functionality then:

  1. The text style in the style panel should actually show the color the link actually is and list where it’s being inherit from (currently is says it is inheriting parent styling which is not correct).
  2. Setting styling for all links should effect nav links as well.

Having to add custom CSS .w-nav-link {color:#[COLOR]} every time is dumb.

It makes even less sense for dropdowns as the text is ultimately text within divs so the logic around links not inheriting standard text formatting doesn’t even apply.

Here is my site Read-Only: https://preview.webflow.com/preview/trace-website?utm_source=trace-website&preview=daa2116f797fe14e7caff1b857dd25a7

#2

I want to implement this on my blog https://www.pennysaviour.com/blog can I go ahead with this? Need your suggestions. Looking forward to your reply.

#3

Hi, @Cael_Prussian!

You are definitely right here — the navbar and navlinks have some odd behavior when it comes to inheriting CSS styles. This is a known quirk with our navbar component.

It’s nice that the navbar is fully built and ready out of the box, but we definitely agree that the component could be improved by correcting the style-inheritance issues.

This is something our team has looked into and it looks like it will take a complete redesign/rebuild of the navbar component. We will definitely be doing this at some point, but I’m unable to say when we’ll ship such an update.

Thanks so much for posting about this issue!

#5

Fair enough.

Would be nice in the interim if you guys could fix the style panel UI (in place of a full rebuild of the nav component).

I can imagine anyone not savvy enough to dig around in the published CSS will get confused per below example:

Style Panel UI shows:
40%20am

For this text:
03%20am

With this CSS:

50%20am
Screen Shot 2019-04-04 at 9.24.50 am.png1016×222 39.8 KB

#6

Sounds like adding a class to the nav links or custom css in the page head are the only ways at the moment per response from @rileyrichter

Custom CSS I usually add if I want to do it that way is:

.w-nav-link {
attribute:value !important;
attribute:value !important;
attribute:value !important;
}