Question

I have a standard bootstrap 3 navbar that I'm trying to center a larger-than-the-navbar logo, as well as the menu. I've tried a lot of previous related SO questions, but can't find a solution that works.

I'm currently trying to give both an equal padding to make them vertically centered, and I've also tried giving the menu items a line-height, but that doesn't work as well.

Heres't what I'm currently doing:

.navbar-brand,
.nav {
  padding: 20px 0;
}

Here's my code: https://jsfiddle.net/rhfhq33s/

Answer 1

You need to set line-height directly to anchor:

@media (min-width: 768px) {
  #menu-primary > li > a { line-height: 95px; }
}

I used also media rule, because i guess you don't need that line-height when menu is collapsed.

https://jsfiddle.net/rhfhq33s/2/

Bootstrap vertical centering in navbar issue

1 个答案: