Vertically center align bootstrap menu

[dpuk44]

Hi,

My first post on this forum!

I have a site built using bootstrap 3 and am trying to vertically center align the menu within its parent. I have attached a screenshot and the red line indicates where I want the menu to line up. ( CANCEL THE IMAGE UPLOAD AS APPARENTLY I AM NOT ALLOWED TO UPLOAD AN IMAGE BEING A NEW USER…geeeeez )

I am trying not to use margin-top in px as I am trying to keep fluid design.

<!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
		<?php
		if ( function_exists( 'ot_get_option' ) ) {
			$logo = ot_get_option( 'company_logo' );
		}
		?>
		<?php
		if ( !empty($logo) ) { ?>
			<img src="<?php echo $logo; ?>" class="img-responsive"><?php }
		else { ?>
			<a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' );  ?></a><?php
		}
		?>
      </div>
	  
      <div id="navbar" class="navbar-collapse collapse">
        <?php
		  $args = array(
		    'menu'			=>	'header-menu',
			'menu_class'	=>	'nav navbar-nav navbar-right',
			'container'		=>	'false'
		  );
		  wp_nav_menu( $args );
		?>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

[DaveMaxwell]

Hi @dpuk44! It would probably help someone if they could see your css as well…

[dpuk44]

Standard Bootstrap 3 CSS file

element.style {
}
localhost/media="all"
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
localhost/media="all"
@media (min-width: 768px)
.navbar {
  border-radius: 4px;
}
localhost/media="all"
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
localhost/media="all"
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
localhost/media="all"
@media (min-width: 768px)
.navbar {
  border-radius: 4px;
}
localhost/media="all"
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

[ronpat]

I’m not familiar with this notation. What does it mean and how does it work? Doesn’t look like standard CSS to me.

localhost/media="all"
.navbar-default {

curious

[dpuk44]

.navbar-default {

}

Local host as im running from my localhost. Ignor that just pulled css in from Chrome developer!