css bug, navigation menu, T3G down arrow

[midnight20pro]

Hey man, I'm not sure if it's only on my screen / browser (windows 10, firefox latest)

So the underline below the down arrow wasn't lining up with the one under the T3G and truck icon. I suspect something new maybe the truck icon, ended up pushing it all down by a pixel or 2.

The solution at least on my screen was to increase the font size from 15 to 17, or 18.
Before:


After:


.p-nav-list > li {
font-size: 18px;
}

It actually ends up making the nav menu more bold on my screen as well.

edit: this seems to break it on microsoft edge / chromium browsers so I'll keep digging

 

[Tyler]

Dang, I already went through this headache. I'm not sure what I changed that broke it again.

Thanks for bringing it to my attention. I'm gonna look into it now because there is something more than just font size going on.

 

[Tyler]

There are a lot of ways to go about fixing it. The problem is, I want it to be fixed in a way that it will always continue to work regardless of other global CSS changes being made (such as changes to the entire nav or text). Switching the font to 18px is just a quick fix. I'm trying to dial in on where two CSS rules are fighting each other, which is what is happening.

If anyone else is seeing this, please let me know what browser and operating system you're on.

 

[Tyler]

@midnight20pro I'm changing stuff around up there again to get it smoothed about. You can probably see it happening live if you're online right now.

 

[midnight20pro]

Looks good!