Twitter Bootstrap Question posted in

Twitter Bootstrap navbar elements not aligned as desired

I am new to bootstrap and am trying to make simple menu/nav.

I am trying to make contents of the menu centered along with the brand. Also when I make the screen smaller the menu items move under the brand. How can I make it so that it doesn’t? There seems to be enough space in the nav to not make the items move under.

Note: I have not written any CSS for this.

https://jsfiddle.net/b9smvjn0/

HTML:

<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#account-options" 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>
      <h4 class="navbar-brand">Image Box</h4>
    </div><!--end navbar header-->
    <!--togglable menu items-->
    <div class="collapse navbar-collapse" id="account-options">
      <ul class="nav navbar-nav">
        <li><a href="#">Upload Photo</a></li>
        <li><a href="#">Deactivate Account</a></li>
        <li><a href="#">Activate Account</a></li>
        <li><a href="#">Delete Account</a></li>
        <li><a href="#">Log Out</a></li>
      </ul>
    </div><!--end toggle-->
  </div><!--end container-->
</div><!--end navigation-->
Tags:

2

Answers


  1. 0

    I think it’s because your h4 element inside the navbar-header. It’s adding an extra margin on top and bottom, this is why it doesn’t align.

    .navbar-header h4 {margin:0;}

    I removed it in your fiddle and it’s working.
    https://jsfiddle.net/b9smvjn0/1/

    Is this what you want?

    Edit

    Hopefully this is what you are looking for.
    Note: This is using custom css, so if you plan to stick with pure bootstrap, you’ll to do in another way.

    I added a div around the brand and the navbar so, we can center both elements.
    Also i reduced the amount of padding on the a tag inside the navbar. This is necessary because of the amount of menu items you have.

    Then i just used the technique of text-align:center; margin:0 auto; on the container div. It’s inside a media(min-width:768); because when it get smaller the layout change, so we get it back to original position.

    This the updated fiddle: https://jsfiddle.net/b9smvjn0/3/

    Login or Signup to reply.
  2. 0

    To remove the extra space, you can remove the margin for the <h4>. And for centering all the <nav> content, or keeping it on the straight line, use these:

    white-space: nowrap;
overflow: hidden;

    Fiddle: https://jsfiddle.net/oLmnjh3p/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search