Why does the default nav bar have these styles?

Hi guys,

I’m new here, so hello :slight_smile:

While playing around with the Navbar component, I couldn’t get the flex space-between setting to work properly. I wanted the logo to be all the way on the left, and then some space between the links and a final link on the right (I moved the brand and nav links out of the container to make it full width).

Should work with flex and justify-content: space-between. But it didn’t, the logo was towards the middle with some unexpected space on its left side. When inspecting the code, I discovered it is caused by these styles:


They create a ::before element, making the logo technically the second element in the nav, thus adding space to the left side.

Do any of you know why these styles are there by default? It appears to be some kind of clearfix, but this makes it impossible to use the nav with flex and space-between, unless I override the CSS.

I think I will just add a Div block, set it to tag <nav> and code my own nav. Is this what you usually do as well, or do you use the standard Navbar component?


1 Like