This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 2 years ago.
I'm using Bootstrap 4.2.1 and having issues trying to get the brand to appear to the right of my navbar. It's appearing just where I want it in a small viewport -- to the right of the hamburger -- but when expanded to a larger viewport, the logo appears to the left of the navbar items. I've tried using navbar-right, pull-right, float: right, placing the logo code in various spots in the navbar code, but I can't get it to appear on the right of the menu.
I'm probably missing something obvious, but any suggestions on how to get the logo to appear on the right? Here's the page. And below is an example of the code.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
<!-- menu/hamburger button -->
<button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button>
<!-- logo -->
<a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a>
<!-- end logo -->
<div class="collapse navbar-collapse text-center" id="navbarsExample11">
<ul class="navbar-nav align-items-center">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="partners.html">For Teachers</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a>
<a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Right now, your logo resolves after the hamburger button, but before your menu. You'll just have to have the logo resolve last.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
<!-- menu/hamburger button -->
<button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse text-center" id="navbarsExample11">
<ul class="navbar-nav align-items-center">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="partners.html">For Teachers</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a>
<a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
</ul>
</div>
<!-- logo -->
<a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a>
<!-- end logo -->
</div>
</nav>
Related
Navber code:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<a class="navbar-brand" href="#">
<img src="images\logo1.png" width="200" height="80" class="d-inline-block align-top" alt="">
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="navbar-nav dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Behandelingen
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sportmassage.html">Sportmassage</a>
<a class="dropdown-item" href="#">Massagetherapie</a>
<a class="dropdown-item" href="#">Ontspanningsmassage</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Afspraak maken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarieven</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Bootstrap code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Dropdown menu inside the navbar doesn't open, anyone an idea on how to fix this?
Not very experienced with bootstrap and don't now what the problem is.
Your button don't call your div
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
your "aria-labelledby" does not match the button id "id="dropdownMenuButton""
it's in the bootstrap documentation
Try this for Bootstrap 4 dropdown navbar
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #fdfeff;">
<a class="navbar-brand" href="#">
<img src="images\logo1.png" width="200" height="80" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navCollapse"
aria-controls="navCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="navbar-nav dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdown01"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Behandelingen
</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="sportmassage.html">Sportmassage</a>
<a class="dropdown-item" href="#">Massagetherapie</a>
<a class="dropdown-item" href="#">Ontspanningsmassage</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Afspraak maken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarieven</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Nevermind I solved the issue, stupid mistake by not adding jquery
I am trying to get a full-width dropdown on a bootstrap 4 navbar. I am using a standard boot4 Navbar.
This is the navbar I am using
Here is how I need it to look :
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right show" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>
</ul>
</div>
</div>
Replace your class container with container-fluid
Delete ml-auto from navbar-nav
I am trying make one of the navbar dropdowns into a sub-menu that unfolds either to the left or right depending on the space.
How do I do this? I've tried everything.
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="#">PRODUCT NAME</a>
<!-- Links -->
<ul class="navbar-nav">
<!--A regular navbar link-->
<li class="nav-item">
<!--a class="nav-link" href="resources/pages/home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" >Images</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR FLOORS/PAGES-->
<a class="dropdown-item" href="resources/callout/tore.html" target="iframe1">PAGE NAME</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Videos</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR VIDEOS-->
<a class="dropdown-item" href="resources/media/vids/" target="_blank">VIDEO NAME</a>
</div>
</li>
<!--Dropdown for additional documents-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Additional Documents</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR DOCUMENTS-->
<a class="dropdown-item" href="Resources/media/docs/" target="">DOCUMENT NAME</a>
</div>
</li>
</ul>
</nav>
I have been trying to create two bootstrap navbars. The first has the website domain name in the center, with a dropdown menu to go to other sections. Then each section has it's own subbar with it's own links.
It currently looks like this.
Which is great and just how I want it. However when I click the dropdown on the brand name, it gets pushed to the left and overlapped with the other navbar.
I also want to bring my theme selector and user profile dropdown to the top nav bar, aligned to the right of the screen. But everytime I try it just ruins the top nav bar and the user profile dropdown gets same overlap issue.
<nav id="topnav" class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand dropdown-toggle ml-auto mr-auto" href="#navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">WebsiteName</a>
<div class="dropdown-menu" id="navbarDropdown" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<nav id ="bottomnav" class="navbar navbar-expand-lg navbar-dark bg-primary py-0 sticky-top">
<div class="container">
<div id="navcollapse" class="collapse navbar-collapse my-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Section Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Section Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#themeModal"><i class="fas fa-moon fa-white"></i></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/profile/">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/section/">section</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>
added
div.dropdown-menu{
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
to bring it in the center. By default bootstrap has left:0 so t shows at the left side of a.
z-index: 9999 because navbar with sticky-top class has z-index: 1020;
https://codepen.io/Xenio/pen/LqmamQ888
div.dropdown-menu{
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav id="topnav" class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand dropdown-toggle ml-auto mr-auto" href="#navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">WebsiteName</a>
<div class="dropdown-menu" id="navbarDropdown" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<nav id ="bottomnav" class="navbar navbar-expand-lg navbar-dark bg-primary py-0 sticky-top">
<div class="container">
<div id="navcollapse" class="collapse navbar-collapse my-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Section Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Section Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#themeModal"><i class="fas fa-moon fa-white"></i></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/profile/">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/section/">section</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>
I have a bootstrap 4 navigation bar.In this navigation bar i have a font awesome icon-shopping cart that i don't want to toggle(to go in that 3 lines menu) when the page pass a max-width value(the default responsive navbar from bootstrap).I would like to remain near the menu bar.How can i do this?
PS:I will put three ! where the font awesome icon is to help you seeing it.
HTML:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.php">English Park Cuisine</a>
<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>
!!!<i class="fas fa-shopping-cart fa-lg" style="color: white;"></i>
<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="#">Register</a>
</li>
</ul>
</div>
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">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<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
Move your shopping cart outside of the nav collapse div and nest it and the nav collapse in a new div. Then style the shopping cart accordingly, but it won't go away with the nav collapse.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.php">English Park Cuisine</a>
<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> <!-- New Div !-->
<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>
<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="#">Register</a>
</li>
</ul>
</div>
<!-- move the anchor outside of the original div but nested inside the new div !-->
!!!<i class="fas fa-shopping-cart fa-lg" style="color: white;"></i>
</div>