Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create another bootstrap collapse navbar button?

I am trying to create a fixed navbar top similar to Udemy using bootstrap 3. This contains a left aligned collapsible drop down. But copying navbar-header twice didn't work. CSS is not my strong point. Any direction is appreciated.

enter image description here

Collapsed one on left and one on the right.

enter image description here

Update

This is what I have so far. I would like the button group items to adopt the default behaviour of bootstrap (with icon-bar) on the left most corner of navbar when resized for smaller displays.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <header class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>          
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <div class="btn-group header-dropdown nav navbar-nav">
            <button type="button" class="btn btn-success">Select City</button>
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Chennai</a></li>
              <li><a href="#">Bangalore</a></li>
              <li><a href="#">Mumbai</a></li>
              <li class="divider"></li>
              <li><a href="#">Others</a></li>
            </ul>
          </div>
        </li>

        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </div>
  </header>
</nav>    
like image 833
RubyNoobie Avatar asked Jan 11 '23 17:01

RubyNoobie


1 Answers

You can use a dropdown to create the "Discover" menu, and some custom CSS to center the brand. The links on the right would toggle/collapse on small screens using the navbar-collapse..

Working demo: http://bootply.com/133215

like image 107
Zim Avatar answered Jan 19 '23 11:01

Zim