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

Question

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?

Please add the snippet in the question itself, creating a [mcve]. plnkr's can be edited and/or deleted, at which point, your question will no longer be useful for future visitors having the same problem. The main reason you are getting help on [so] is because that help, at least theoretically, is also distributed to future visitors. If you're not on SO to help others... i guess it's OK. Neither are we. — tao, Jul 28 '17 at 01:20
@AndreiGheorghiu You are right. I am doing so because last time another friend asked me to add plnkr to help demonstrate. However you just told me more about it. I will edit my question! — Zanecola, Jul 28 '17 at 01:27

Dan Kreiger · Accepted Answer · 2017-07-28T01:46:05.463

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.

CodePen Demo

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

Thanks, that's almost what I want, and I made one change so that the brand is always displayed. https://codepen.io/anon/pen/brVgyd — Zanecola, Jul 28 '17 at 01:51
People either place them in the `head` or at the end before the closing `
` tag. It's good practice to place it at the end before the closing `` tag because it allows the page to [load faster](https://stackoverflow.com/questions/17140386/why-is-it-good-to-put-script-tag-in-the-end-of-body-tag). — Dan Kreiger, Jul 28 '17 at 02:07

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

1 Answers1