CODEWITHSUNDEEP
jquerycsstwitter-bootstraptwitter-bootstrap-3
Nuvolari
Nuvolari

Reputation: 1155

Two Menus In The Same Nav Bar

I wish to have two collapsable menus on the same nav bar row. The left menu will display the site's main menu while the right one will display a 'user menu'.

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
   <div class="navbar-header">        
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#user-menu">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My Site</a>
   </div>

   <span id="main-menu" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="about">About</a></li>
         <li><a href="members">Members</a></li>
         <li><a href="forum">Forum</a></li>
         <li><a href="mow">Register</a></li>
         <li class="dropdown">
            <a href="Products" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
            <ul class="dropdown-menu">
               <li><a href="cars">Factions</a></li>
               <li><a href="software">Tanks</a></li>
               <li><a href="food">Infantry</a></li>
            </ul>
                </li>
              </ul>
            <form id="sys-login_form" target="passwordIframe" method="POST" action="blank.php" class="navbar-form navbar-right">
                 <span id="sys-login_status"></span>
                <div class="form-group">
                    <input type="text" placeholder="Username" class="form-control" name="username" id="sys-login-username" title="Username" data-active="0">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="Password" class="form-control" name="password" id="sys-login-password" title="Password" data-active="0">
                </div>
                <input name="remember_login" id="sys-login-remember" type="checkbox" checked="checked" value="forever" title="Remember">
                <button type="button" class="btn btn-success" title="Login" name="login_btn" id="sys-login_btn" data-in_use="0">Go</button>
            </form>
            <iframe id="sys-passwordIframe" name="passwordIframe" style="display:none"></iframe>
      </span>

       <span id="user-menu" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="profile/fred" id="sys-username_box" class="dropdown-toggle" data-toggle="dropdown">Fred <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="account/settings">Settings</a></li>
                        <li><a data-in_use="0" href="account/logout">Logout</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="about">Mail</a></li>
                <li><a href="about">Bookmarks</a></li>
            </ul>";
        </span>
  </div></div>

It works fine in mobile view ie 2 collapsed menus are displayed, however in normal mode or full screen mode the user menu to the right is pushed down on to a new row below the main menu.

A full example of this can be seen here: http://bootply.com/79056

Upvotes: 0

Views: 1544

Answers (2)

johnnynotsolucky
johnnynotsolucky

Reputation: 540

For your first nav bar, add pull-left to the class attribute, i.e.

<ul class="nav navbar-nav pull-left">...</ul>

Normally, you wouldn't need to add this, but because you want two separate collapsible menus, the first one needs to be told to float left so the second doesn't get forced down.

Here is an example. Note, it assumes that if you're logged in, only then will the user menu be displayed. As it was, if the login form were to always be visible and the user menu always visible, the width specified in the .container class will be too narrow.

Upvotes: 2

tea2code
tea2code

Reputation: 1007

You shouldn't use <span> to make something inline. Instead use <div> and use float or something like SimpleGrid to set the layout.

Upvotes: 1

Related Questions