How to center a brand in navbar with bootstrap?

Question

I am now making my first WordPress theme using bootstrap, and trying to center my brand logo in the middle of my menu. I have looked at different ways to do it, even here on SO, but has been unable to make them work properly.

Here's my HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <div class="row">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </a>
                <a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
                <div class="nav-collapse collapse">
                  <ul class="nav">

                      <?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>

                  </ul>
                </div><!--/.nav-collapse -->
        </div>
        </div>
    </div>
  </div>

How can I make this work, and still keep it responsive? Do I have to make two menu fields? Any suggestions is appreciated!

http://stackoverflow.com/questions/20024463/bootstrap-3-how-do-i-place-the-brand-in-the-center-of-the-navbar — php_nub_qq, Jun 25 '15 at 22:36
Are you using Bootstrap 3? The `navbar-inner` is from Bootstrap 2. Anyway, Google shows several examples like this: http://bootply.com/mQh8DyRfWY — Carol Skelly, Jun 26 '15 at 02:24

How to center a brand in navbar with bootstrap?

0 Answers0