Twitter Bootstrap Question posted in

Twitter Bootstrap 3 Navbar collapse bug

Good day guys, I had a bit trouble in the collapse navbar. It doesn’t align to the right side of the browser when i clicked the collapse button?

<div class="navbar navbar-inverse navbar-static-top">

<div class="container">

    <a href="#" class="navbar-brand">My Site</a>

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

    </button>

    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li>


            <li class="dropdown">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>

            <ul class="dropdown-menu">
            <li><a href="#">Logout</a></li>
            <li><a href="#">Logout</a></li>
            <li><a href="#">Logout</a></li>                 

            </ul>


            </li>
        </ul>
    </div>

</div>

Sample output

Tags:

2

Answers


  1. 0

    You need to wrap the collapse button and brand link in .navbar-header:

    <div class="navbar navbar-inverse navbar-static-top">
<div class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">My Site</a>
    </div>

    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Logout</a></li>
                    <li><a href="#">Logout</a></li>
                    <li><a href="#">Logout</a></li>                 
                </ul>
            </li>
        </ul>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    You must use navbar-header, then you have brand and hamburger icon on the same level and the whole content of your menu below that line. So basically your code should look something like that:

    <div class="navbar-header">
  <a href="#" class="navbar-brand">My Site</a>

  <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </button>
</div>

    Link to live example: http://www.bootply.com/jowa705iHl

    Here you can find all the needed documentation: http://getbootstrap.com/components/#navbar

    Best of luck 🙂

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

Back To Top
Search