Exclude Menu Item from the Collapse of Bootstrap 3 Navbar

Exclude menu item from the collapse of bootstrap 3 navbar

Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!

Fiddle: http://jsfiddle.net/nomis/n9KtL/1/

Fiddle with clearfix and expanded options on left side like normal: http://jsfiddle.net/jgoemat/u1j8o0n3/1/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><nav role="navigation" class="navbar navbar-default navbar-fixed-top">  <div class="container">
    <!-- Title -->    <div class="navbar-header pull-left">      <a href="/" class="navbar-brand">GNOMIS</a>    </div>
    <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->    <div class="navbar-header pull-right">      <ul class="nav pull-left">        <!-- This works well for static text, like a username -->        <li class="navbar-text pull-left">User Name</li>        <!-- Add any additional bootstrap header items.  This is a drop-down from an icon -->        <li class="dropdown pull-right">          <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>          <ul class="dropdown-menu">            <li>              <a href="/users/id" title="Profile">Profile</a>            </li>            <li>              <a href="/logout" title="Logout">Logout </a>            </li>          </ul>        </li>      </ul>
      <!-- Required bootstrap placeholder for the collapsed menu -->      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>      </button>    </div>
    <!-- The Collapsing items            navbar-left or navbar-right -->    <div class="collapse navbar-collapse navbar-left">      <!--                      pull-right keeps the drop-down in line -->      <ul class="nav navbar-nav pull-right">        <li><a href="/news">News</a>        </li>        <li><a href="/Shop">Shop</a>        </li>      </ul>    </div>
    <!-- Additional navbar items -->    <div class="collapse navbar-collapse navbar-right">      <!--                      pull-right keeps the drop-down in line -->      <ul class="nav navbar-nav pull-right">        <li><a href="/locator">Locator</a>        </li>        <li><a href="/extras">Extras</a>        </li>      </ul>    </div>  </div></nav>

How to exclude menu items on collapse in bootstrap nav

Yes, refer here http://getbootstrap.com/css/#responsive-utilities-classes for the available classes.

For your example, you would use something like this:

<li class="hidden-xs">|</li>

How to exclude logo from collapsed navbar? [Bootstrap/HTML]

If I understand correctly, this is the way I would approach this:

Add d-none d-lg-block classes to the middle logo img tag so it displays only desktop.

Then add a duplicate img as the last item in your .container-fluid and add d-block d-lg-none classes to it so it will display on mobile but not desktop.

Then add flex-nowrap to your nav tag, so the logo will appear inline with the toggle button.

Lastly, add align-self-start class to the duplicate/mobile img so it will stay inline with the toggle button when the nav is open.

It should look something like this:

<nav class="navbar navbar-expand-lg navbar-dark flex-nowrap">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
      <div class="navbar-nav justify-content-center">
        <a class="nav-link" href="index.html">Home</a>
        <a class="nav-link" href="#">About</a>
        <img class="d-none d-lg-block" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
        <a class="nav-link" href="#">Portfolio</a>
        <a class="nav-link" href="#">Contact</a>
      </div>  
    </div>
  </div>
  <img class="d-block d-lg-none align-self-start" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
</nav>

Codepen example

Is this what you're looking for?

[UPDATE]

I didn't see that you were using Bootstrap 5. I added a .text-end container that wraps the button.nav-togger and the .navbar-collapse and added a few other utility classes for style.

<nav class="navbar navbar-expand-lg navbar-dark flex-nowrap flex-row-reverse">
  <div class="container-fluid navbar justify-content-end justify-content-lg-center">
   <div class="text-end">
      <button class="navbar-toggler mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <div class="navbar-nav container-fluid justify-content-center p-0">
        <a class="nav-link" href="#">Home</a>
        <a class="nav-link" href="#">About</a>
        <img class="d-none d-lg-block" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
        <a class="nav-link" href="#">Portfolio</a>
        <a class="nav-link" href="#">Contact</a>
        
      </div>  
    </div>
   </div>
  </div>
  <img class="d-block d-lg-none align-self-start" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
</nav>

With Bootstrap 5: Codepen example

How to exclude item from collapse in bootstrap navbar

You can do it with a bunch of .visibble-*-*. It's cleaner with an .hidden-xs.

How to ignore items in menu collapse with a left-hand hamburger for Bootstrap 4?

I figured it out with the help of Viswanatha Swamy.

Unfortunately, the col-sm-2 fixed-top did some unwanted things like shoved my cart and login button too far to the top, and some strange container-related things at different sizes. But it did fix the buttons on the outside of the hamburger.

I looked at the CSS behind Bootstrap's col-sm-2 and fixed-top. I ended up writing my own CSS to fix this.

I wrapped both buttons in a single div and added this CSS:

.loginFixed {
position: fixed;
top: 0;
right: 0;
left: auto;
z-index: 1030;
margin-top: 15px;
}

I needed the margin-top because a fixed top: 0 results in squishing at the VERY top, and any value for top results in the buttons falling down with the hamburger.

I added a margin-top to compensate for the top: 0 tightness.

The final button setup looks like this in HTML:

<div class="navbar-text loginFixed">
    <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>
                

    <a class="btn" href="cart.html"><i class="fa fa-shopping-cart fa-lg"></i></a>
</div>

And the whole menu looks like this:

<nav class="navbar navbar-expand-sm navbar-light bg-white sticky-top ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#oaNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand mr-auto" href="#"><img src="img/logo-md-white.png" width="180" style="padding-left: 12px"/></a>
    <div class="collapse navbar-collapse" id="oaNavbar">
            <ul class="navbar-nav" style="padding-left: 5px">
                <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="collections.html"> Collections</a></li>
                <li class="nav-item"><a class="nav-link" href="categories.html"> Categories</a></li>
            </ul>
        </div>
  
    <div class="navbar-text loginFixed">
        <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>

        <a class="btn" href="cart.html"><i class="fa fa-shopping-cart fa-lg"></i></a>
    </div>
</nav>

How to hide collapsible Bootstrap navbar on click

Update 2021 - Bootstrap 5 (beta)

Use javascript to add a click event listener on the menu items to close the Collapse navbar..

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
    l.addEventListener('click', () => { bsCollapse.toggle() })
})

BS5 demo javascript method

Or, Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Disabled</a>
                </li>
            </ul>
            <form class="d-flex my-2 my-lg-0">
                <input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

BS5 demo data-attributes method

Update 2019 - Bootstrap 4

The navbar has changed, but the "close after click" method is still the same:

BS4 demo jQuery method

BS4 demo data-toggle method

Bootstrap 3 (original answer)

You can add the collapse component to the links like this..

<ul class="navbar-nav mr-auto">
     <li class="nav-item active">
         <a class="nav-link" href="#home" data-toggle="collapse" data-target=".navbar-collapse.show">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.show">Pricing</a>
     </li>
 </ul>

BS3 demo using 'data-toggle' method

Or, (perhaps a better way) use jQuery like this..

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

BS3 demo using jQuery method

Exclude Menu Item from the Collapse of Bootstrap 3 Navbar