CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Rannie Ollit
Rannie Ollit

Reputation: 43

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

Upvotes: 1

Views: 1327

Answers (2)

kwiat1990
kwiat1990

Reputation: 489

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 :)

Upvotes: 1

MattMS
MattMS

Reputation: 1156

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>

Upvotes: 0

Related Questions