Bootstrap 4 - Navbar items outside the collapse
The simplest way is using the flexbox utility classes, so no extra CSS is needed. Keep the items you always want to show out of the navbar-collapse
div.
https://www.codeply.com/go/TWZGiy3VGw
<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
<a class="navbar-brand" href="#">Navbar</a>
<div class="d-flex flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row">
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Notice the use the responsive order-*
classes to ensure the collapse menu items remain last (order-3
) when in the collapsed/mobile breakpoint.
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
Bootstrap 4 navbar unable to shift items to the right
You need to use justify-content-between
on your div (navbar-collapse)
and put the login
and sign-up
ul outside the first ul
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
Demo:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Connect4</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
</ul>
<ul ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up</a>
</li>
</ul>
</div>
</nav>
how to collapse bootstrap 4 navbar
You need to include CDN version of jQuery before it, it's written in the bootstrap documentation.
https://getbootstrap.com/docs/4.4/getting-started/download/
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
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 navbar/menu keep entry visible when collapsed
Since you're using Bootstrap 4, this answer is more relevant to your question:
https://stackoverflow.com/a/41513784/171456 (see the last part)
The part that you always want to keep visible needs to be separate from any of the collapsible parts. Then use the order-*
classes to position the items as desired:
Demo: https://codeply.com/p/ylDhhZtpiH
<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top justify-content-start">
<a class="navbar-brand text-capitalize text-blur" href="/">
<img class="mr-1" src="//placehold.it/32" alt="Logo">
<span class="">Portami in Pista</span>
</a>
<button class="navbar-toggler order-2 ml-1" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
<span class="sr-only">[Menu]</span>
<span class="navbar-toggler-icon" title="[Menu]"></span>
</button>
<!-- 1st collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 flex-xl-grow-1 order-last" id="collapsableTopMen">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/Schools/">
<i class="fa fa-motorcycle fa-rotate-315 text-danger" aria-hidden="true"></i>
<span class="text-blur-danger">PiP Reparto Corse</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Tracks/">
<i class="fa fa-flag-checkered text-primary" aria-hidden="true"></i>
<span>Piste</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Blog/le-guide-del-giovedi/">
<i class="fa fa-mortar-board text-primary" aria-hidden="true"></i>
<span>Le guide del giovedì</span>
</a>
</li>
</ul>
</div>
<!-- always visible portion -->
<ul class="navbar-nav order-1 order-xl-last ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-flag it" title="Italiano"></i>
<span class="d-inline d-xl-none">Italiano</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="#">
<i class="fas fa-flag-usa gb" aria-hidden="true"></i>
<span class="">English</span>
</a>
</div>
</li>
</ul>
<!-- 2nd collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
</li>
</ul>
</div>
</nav>
https://codeply.com/p/ylDhhZtpiH
Related Topics
Why Doesn't This A:Visited CSS Style Work
Applying CSS Styles Only to Certain Elements
How to Create an Angled Corner in Css
How to Change the Bootstrap Primary Color
Handling a Colon in an Element Id in a CSS Selector
Font Awesome 5 - Why Aren't Icons Like Bitcoin, Facebook, Twitter Showing
My Position: Sticky Element Isn't Sticky When Using Flexbox
Why Did Bootstrap 3 Switch to Box-Sizing: Border-Box
How to Reference One CSS Rule Within Another
How to Make Google Fonts Work in Ie
How to Reset/Remove Chrome'S Input Highlighting/Focus Border