get logo to center on tablets

[ogletree]

I have a site that is done in bootstrap. Right now it looks good on desktops and mobile devices. My logo and menu and on the same line on desktop and are left and right justified. On mobile it just turns into a small box with a drop down menu in top left and logo is centered.

In some cases like tables my logo and menu end up on 2 lines instead of one but continue to be left and right justified. In this case I would like them to be centered on the page. How can I do this? It seems that bootstrap is sending the logo to the left. I see this when I inspect the page

media (min-width: 768px)
.navbar-header {
 float: left;
}

Here is the page code.

<nav class="navbar">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo BASE_URL; ?>//"><img src="<?php echo BASE_URL; ?>/img/logo.png" class="img-logo img-responsive"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="<?php echo BASE_URL; ?>//">home<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
  <a href="<?php echo BASE_URL; ?>/courses.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses</a>
  <ul class="dropdown-menu">
  
  <li><a href="<?php echo BASE_URL; ?>/basic-adwords.php">Adwords Basic</a></li>
  <li><a href="<?php echo BASE_URL; ?>/advanced-adwords.php">Adwords Advanced</a></li>
  </ul>
 </li>
<li><a href="<?php echo BASE_URL; ?>/about-us">about</a></li>
<li><a href="<?php echo BASE_URL; ?>/resources.php">resources</a></li>
<li><a href="<?php echo BASE_URL; ?>/solutions.php">solutions</a></li>    
<li><a href="<?php echo BASE_URL; ?>/contact.php">contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

[Tom_Cash]

Couple of things to try:

media (min-width: 768px)
.navbar-header {
 float: left;
 text-align: center;
}

Or

media (min-width: 768px)
.navbar-header {
 margin: 0 auto 0 auto;
}

The latter will centre the div itself, whereas the former will centralise the content of the div.

Depends on what you're trying to acheive, but playing with both of those solutions should see you on the right path.

[Tom_Cash]

Also, if you have two divs falling side by side, it's because of the float: left; property. I'd suggest you read up on floats.