How to create another bootstrap reload button?

I am trying to create a fixed top navigation bar similar to Udemy using bootstrap 3. This contains a left-aligned resettable finger. But copying navbar-headerfailed twice. CSS is not my forte. Any direction is appreciated.

enter image description here

Curled one to the left and one to the right.

enter image description here

Update

This is what I still have. I would like the button group elements to accept the default bootstrap behavior (with an icon) on the left in the very corner of the navigation bar when resizing 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>    
+4
source share
2 answers

dropdown "" CSS . / navbar-collapse..

: http://bootply.com/133215

+8

, , . , , :

<div class="btn-group pull-left">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="sr-only">Button text</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

http://getbootstrap.com/components/#btn-dropdowns

0

Source: https://habr.com/ru/post/1538267/


All Articles