Exclude Menu Item from Collapsing Bootsrap

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>

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

Bootstrap 4 - How to prevent collapsing menu from collapsing all elements in the nav

Place your language switch inside a .navbar-item, right after .navbar-brand and give it an order: 1 (which is bigger than the default of 0 - so it's going to be displayed as the last item of its parent) on the interval at which your .navbar is not collapsed. Since you're using .navbar-expand-lg, it's going to be @media (min-width: 992px) but if you used .navbar-expand-md it would have been min-width: 768px - or 576px for -sm. More about responsive breakpoints here.

When the nav is collapsed, you don't need the order changed, so the language switcher is displayed before the menu (that's the reason we placed it after the logo in the first place). See it working:

.logo {  max-width: 130px;}
.btn { font-family: 'Muli', sans-serif; font-weight: 900;}
.btn { background: rgb(142, 63, 41); color: rgb(202, 171, 159);}
.active { background: rgb(166, 73, 47); color: white;}
@media(min-width: 992px) { .language-switch { order: 1; }}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a> <div class="nav-item language-switch"> <div class="btn-group btn-toggle lang mr-1"> <input type="button" name="lang" class="btn" value="ENG"> <input type="button" name="lang" class="btn active" value="SPA"> </div> </div> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mx-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">PURPOSE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">FAMILY</a> </li> <li class="nav-item"> <a class="nav-link" href="#">AGRICULTURE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ART</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CONTACT</a> </li> </ul> </div></nav>

Prevent items from being collapsed in bootstrap 4 navbar toggle

You need to group the non-collapsible items in a single div, and then use the spacing and order utilities to align it as needed.

https://www.codeply.com/go/SJia0JtI1T

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<div class="d-flex order-lg-1 ml-auto pr-2">
<a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
<ul class="navbar-nav flex-row">
<li class="nav-item mx-2 mx-lg-0">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
</nav>

Related: Bootstrap 4 - Navbar items outside the collapse

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



Related Topics



Leave a reply



Submit