Navbar does not align

Hey, currently working on my portfolio page.

Problem: The ul element in my navbar does not center vertically. I used flexbox to align items to center.

Here my code: https://codepen.io/3rfaan/pen/wezera

Thx in advance!

Hey, you can do this to fix the problem.

Add height: 100%; to your ul element
and then,
Add line-height: 40px; to your li element

Hope that helps.

Rob

Hey Rob, that worked indeed, thank you!

But isn’t there a way to solve this with flexbox? And how did you calculate the 40px?

I’m not using flexbox so couldn’t really comment on that without looking into it deeper. 40px line height was calculated based upon padding being applied to the navbar element automatically by bootstrap and taking into consideration the border around the ul. I took those values away from the 60px height that you set as the nav’s height.
Hope that helps.

Yes that helped alot, thank you!