Center the img/logo and make the navbar items around the logo - html

I want to center the logo and have 2 navbar items from its left and the other 2 from the right. It will increase my website functionality and help with the more modern look. If someone could help me I would be really grateful, thanks a lot!!!
tried searching here i didnt find anything that was working for me.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img\binet-logo1.png" height="70"width="100" alt=""></a>
<button class="navbar-toggler" 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 active">
<li class="nav-item">
<a class="nav-link" href="index.html">Дома</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">
Продукти
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="produkti.html">Ултразвучни системи</a>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="zanas.html">За Нас</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Bojan\Desktop\BinetMedical\contact.html">Контакт</a>
</li>
</ul>
</div>
</div>

You can try using this code to get the logo in the middle and the nav links on the sides.
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Дома</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">
Продукти
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="produkti.html">Ултразвучни системи</a>
</a>
</li>
</ul>
<ul class="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#"> <img src="img\binet-logo1.png" height="70"width="100" alt=""></a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="zanas.html">За Нас</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Bojan\Desktop\BinetMedical\contact.html">Контакт</a>
</li>
</ul>
</div>
</nav>
Each part is a seperate ul and i added the class mx-auto

Related

bootstrap 4 nav bar not covering full width when dropdown

This is what my code looks like for the nav bar, when I press the dropdown button, this is how it will look like on my page
https://docs.google.com/document/d/1gHsqAZ9QTaJX4A-1PXrVVoXi2KWBWqa6YTA_-QtG8wo/edit?usp=sharing
<nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px">RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
I have tried changing the width of the navbar and some of the bootstrap properties but none of my attempts have worked so far. I am unsure if the problem lies with the navbar or dropdown menu.
Thank you so much for all your inputs!
You can add .dropdown-menu-right to .dropdown-menu to align the dropdown to the right when it is shown -- this way it stops it from increasing the width of the page. Is this what you wanted?
Otherwise consider using Bootstrap collapse, I can change my example if you want!
body { height: 100vh }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="bg-dark h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px"> RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu dropdown-menu-right">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu dropdown-menu-right">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Dead Center Nav Links with Left Logo Bootstrap 5

I have been trying to get a navbar in Bootstrap 5 working with dead centered links and a left brand logo. However using flexbox options in Bootstrap 5 I can only seem to get the nave links sort of centered in a flex container. However the collapse behavior works as expected.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top navbar-default">
<div class="container-fluid">
<a href="#" class="navbar-brand me-auto">
<img style="height: 45px" src="https://lanman2018.ieee-lanman.org/files/2016/01/sample-logo#2x.png">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">page link/a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown" aria-expanded="false">dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown">
<li>
<a class="dropdown-item" href="#">2nd Page</a>
</li>
<li>
<a class="dropdown-item" href="#"> This is a really long page nameS</a>
</li>
<li>
<a class="dropdown-item" href="#">still a long name</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Page</a>
</li>
</ul>
</div>
</div>
</nav>
If I set the logo position to absolute I get mostly what I am looking for but upon collapse the nav button sits under the logo. I am probably missing something obvious as I usually don't do front end.
Here is a link to a jsfiddle where I have both of the solutions I've been working on https://jsfiddle.net/0s24hLmf/
It should work if you push the toggler to the right using ms-auto...
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-default">
<div class="container-fluid">
<a href="/index.php" class="navbar-brand nav-logo me-auto position-absolute top-0">
<img style="height: 45px" src="https://lanman2018.ieee-lanman.org/files/2016/01/sample-logo#2x.png">
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbar2">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Page Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" aria-expanded="false">dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown">
<li><a class="dropdown-item" href="#">2nd Page</a>
</li>
<li><a class="dropdown-item" href="#"> This is a really long page nameS</a></li>
<li><a class="dropdown-item" href="#">still a long name</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Page</a>
</li>
</ul>
</div>
</div>
</nav>
Demo

How to align navbar item to the right side (also in the data-toggle when minimizing)?

I want to create a navbar where the logout and contact button are on the right side.
In the mobile view the nav-items should be combined in a collapse toggle. This is my code so far:
Untitled
HeadlineCompany
Toggle navigation
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false">All Items</a>
<div class="dropdown-menu">
<a class="dropdown-item">Item 1</a>
<a class="dropdown-item">Item 2</a>
</div>
</li>
<li class="nav-item"><a class="nav-link">Topics</a></li>
</ul>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link">Contact</a></li>
<li class="nav-item"><a class="nav-link">Logout</a></li>
</ul>
</div>
</nav>
And this is what it looks like:
actual normal page
actual mobile view
This is how it should look:
as it should be
Does anyone have a tip on how I can make this work?
Thank you!
This worked for me - add a <div> wrapper to the <ul> (towards the bottom of my pasted code).
Here is JSFiddle: https://jsfiddle.net/omartheman949/eykr71c4/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">HeadlineCompany</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><span class="sr-only">(current)</span></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">
All Items
</a>
<div class="dropdown-menu" 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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Topics</a>
</li>
</ul>
<div> <!-- ************ADD THIS DIV WRAPPER************ -->
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link">Contact</a></li>
<li class="nav-item"><a class="nav-link">Logout</a></li>
</ul>
</div> <!-- ************ADD THIS DIV WRAPPER************ -->
</div>
</nav>

Prevent items from being collapsed in bootstrap 4 navbar toggle

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>

Bootstrap float navbar items to the right [duplicate]

This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 5 years ago.
Im trying to float navbar items to the right instead of the left
here is the html i have used floats float-right class and i think pull-right is deprecated so anyone that could help would be appreciated
<header class="container-fluid" id="nav">
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" 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>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
Create another <ul class="navbar-nav ml-auto"> for the navbar items you want on the right.
ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<style>
/* Stackoverflow preview fix, please ignore */
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Left Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link">Left Link 2</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Right Link 1</a>
</li>
<li class="navbar-item">
<a class="nav-link">Right Link 2</a>
</li>
</ul>
</nav>
</body>
Add class "navbar-right" in <ul class="navbar-nav ">