Center logo in Boostrap Wordpress menu on resizing

debugcn Published at Dev

Rafaucau

So, by default Bootstrap show logo on left corner, but on resizing it is still on the left. I want to put it in the middle to make it nicer display.

Image of what i have: What i have

Image of what i want to be displayed: What i want

I have this code to display Bootstrap menu in Wordpress:

<header>
  <div class="menu">
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container" id="menu2">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1">
            <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 esc_url( home_url( '/' ) ); ?>">
              <img alt="Logo" src="<?php bloginfo('template_url');?>/img/logo.png">
            </a>
          </div>
          <div class="navbar-collapse collapse col-md-9" id="menu1">
            <?php wp_nav_menu(array(
                'theme_location' => 'primary',
                'container' => false,
                'menu_class' => 'nav navbar-nav navbar-right'));
              ?>

          </div>

        </nav>
      </div>
</header>

I tried text-align:center, but it only works for links, not for logo

Rafaucau

Ok, i solved the problem by adding this:

    @media (min-width:768px) {
  .navbar .navbar-nav {
      display: inline-block;
      float: none;
  }

  .navbar-brand{
    display: inline-block;
    float: none !important;
  }

  .navbar .navbar-collapse {
      text-align: center;
      margin: 0 auto;
  }

  .navbar-nav > li {
      display: inline-block;
      float:none;
  }
}

@media(max-width:1200px) {
.navbar-header {
        text-align: center;
        margin: 10px;
        float: none !important;
    }
  }

Now the brand logo is centered when there is no space and links go down.

I also created clean Bootstrap navbar example without Wordpress for another users who want to see how it works (run and display it on full screen and resize window to see effect):

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <style>
      @media (min-width:768px) {
    .navbar .navbar-nav {
      display: inline-block;
      float: none;
    }

    .navbar-brand{
    display: inline-block;
    float: none !important;
    }

    .navbar .navbar-collapse {
      text-align: center;
      margin: 0 auto;
    }

    .navbar-nav > li {
      display: inline-block;
      float:none;
    }
    }

    @media(max-width:1200px) {
    .navbar-header {
        text-align: center;
        margin: 10px;
        float: none !important;
    }
    }
  </style>
</head>
<body>
  <header>
    <nav class="navbar navbar-default">
    <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="#">Brand</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">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</header>
</body>
</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.