Numerical navigation Minimum

[Len]

Having played around with Minimum locally for a long time I just noticed something for the first time today. The numerical navigation "breaks" once you get into double digits.

Solution, obviously, is to slightly decrease font size. Just thought I'd mention it. 🙂

[John]

Hey Len,

I discovered something similar on Outreach as well as Minimum, and it also happens with single digits when you make your browser window smaller or view it in mobile. The solution I came up with is to increase the line-height for the list and add white-space: nowrap to the link (see the code below). The line-height may need to be adjusted per theme or personal preference.

.navigation ul {line-height: 50px;}
.navigation li a {white-space: nowrap;}

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Len]

Awesome John! Just confirmed the problem with Outreach and verified your solution.

[Len]

Doh! The problem exists in all of my child themes as well. Guess I'm pushing out updates. I like your solution better John. I'm going to go with that. 🙂

[John]

🙂

Yeah, this is part of my "boilerplate CSS add-ons", but it'd be nice if StudioPress added it across the board, at least on their responsive themes.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts