CODEWITHSUNDEEP
csstwitter-bootstrap
Zanecola
Zanecola

Reputation: 1544

In Bootstrap3, how to change the order of collapsed elements in navbar?

I am using Bootstrap3 <nav>, in the sample code the team used navbar-toggle collapsed class to collapse the elements in navbar on small screen.

My question is how to change the order of them when collapsed? I made a short snippet:

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
      <span class="sr-only">Options</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <ul class="nav navbar-nav collapse navbar-collapse">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>

    <div class="navbar-header">
      <a class="navbar-brand" href="#">
      <img alt="BRAND" src="some/img.png">
      </a>
    </div>


    <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </nav>
</body>
</html>

To clarify, in my <nav>, from left to right there are a list, an image, another list. When they are collapsed on small screen, the order will be from top to bottom, list, image and list. How to put the image at the top when collapsed?

Upvotes: 1

Views: 870

Answers (1)

Dan Kreiger
Dan Kreiger

Reputation: 5516

The easiest way would be to create the brand html twice, and make one visible on xs and the other hidden on xs.

You can do this by adding the visible-xs and hidden-xs classes to the containers that you want to be either visible or hidden when the navbar is collapsed.

By doing this you can display the brand image in both places without having to add any JavaScript.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<nav class="navbar navbar-default">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
    <span class="sr-only">Options</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <ul class="nav navbar-nav collapse navbar-collapse">
    <li class="dropdown">
      <div class="navbar-header visible-xs">
        <a class="navbar-brand" href="#">
          <img alt="BRAND" src="some/img.png" />
        </a>
      </div>
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-bars" aria-hidden="true"></i>
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">LINK1</a></li>
        <li><a href="#">LINK2</a></li>
      </ul>
    </li>
  </ul>

  <div class="navbar-header hidden-xs">
    <a class="navbar-brand" href="#">
      <img alt="BRAND" src="some/img.png" />
    </a>
  </div>

  <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hi! User<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#"> Profile</a></li>
        <li><a href="#"> Feedback</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#"> Log Out</a></li>
      </ul>
    </li>
  </ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions