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
Possible to Set Hex Color Opacity Independently
Nesting Element+Element Selector in SCSS
CSS Element Back to Default Style
Media Query CSS and Notepad++ Compatibility Issue
Set Chart Area Background Color in Rcharts/Slidify/Nvd3
CSS Absolute Positioned Elements and Margins
Javafx 8 - How to Change The Color of The Prompt Text of a Not Editable Combobox via CSS
Overriding Overflow-X CSS Property on iOS
Shiny Presentation (iOSlides): Custom CSS and Logo Windows 7/8
Gotham Book' Font-Family Not Working in Safari Browser and iPhone Devices
Why CSS Height 100% Is Not Applying for Normal Div
Why Is The HTML Select Background-Color Black in Chrome When Set to Transparent
CSS- Webkit-Text-Stroke But Stroke Covers Font-Color
CSS Grid Vs Dynamic Definition List Autoplacement
Ie10 Flexbox Widths Include Padding, Causing Overflow. Box-Sizing: Border-Box Doesn't Fix