Bug Report: Font-Size CSS Inheritance Issue in Navbar16 Links

·

Hi Matt J. – I think there may be a bug with font-size CSS inheritance on some components. As an example, the navbar16 links (within the menu) are getting overridden. See screenshot

3 comments

Matt J.
·
naw this setup allows for more flexibility but you are welcome to comment out those styles - you can find them at the top of the global styles component. Just apply your styles to the parent element of any of those elements listed and you'll have full control.
Nick J.
·
Same problem today, Matt J.. Maybe it's not technically a "bug" but copying navbar16 into a fresh project does not yield the same look as in the Relume component library. The class .navbar16_link's font-size of 3.5rem is being overridden by the Global Styles. Not a big deal since it's fixable but it was definitely confusing at first (which is how I ended up in the Slack looking to see if I was crazy or if someone else had the same problem). Are there any other widely known issues (or quirks) caused by the Global Styles?
Matt J.
·
Nick J. ah yeah, I see the issue. This is probably one of the rare cases where we apply those kinds of styles directly on the link so we'll have to refactor this component. If you apply the font-size 3.5rem to the navbar16_links-wrapper then all should be good here. I suspect there might be other instances of components that don't adhere to this same hierarchy because the added CSS was put in there for the anticipation of the style guide builder export. In order to apply the styles that you choose within the style guide builder, we need the components to inherit these values - rather than adding these values directing to the elements. Hope that makes sense. We're actively working on ways to better communicate these kinds of global changes in the future so that they don't throw off your flow.