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 ">
Related
I am trying to design a website for our client. In this website, I wish to make the "service" navbar item to a particular content area on the home page. For example, suppose if a user clicks on the "services" link then it moves to a particular section called "Our product" on the homepage. I have no idea how to achieve this....someone please help me! (I am using Bootstrap, Html, and CSS).
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-expand-lg" style="background-color: #314B1F;">
<div class="container-fluid">
<img src="images/20220721_005023.png" alt="" width="30" height="24">
<a class="navbar-brand" href="#">SAMKAY GLOBAL</a>
<button class="navbar-toggler" 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">
<ul class="navbar-nav me-end mb-2 mb-lg-0 ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html#PROJECT_CASE">Services</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Window System</a></li>
<li><a class="dropdown-item" href="#">Door System</a></li>
<li><a class="dropdown-item" href="#">Aluminum Partitions</a></li>
<li><a class="dropdown-item" href="#">Curtain Walls</a></li>
<li>
<a class="dropdown-item" href="#"></a>Protected window System</li>
<li><a class="dropdown-item" href="#">Sliding Window System</a></li>
<li><a class="dropdown-item" href="#">Swing Window System</a></li>
</ul>
</li>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">News/Event</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
</ul>
<img src="images/Facebook_Logo.png" alt="Facebook logo" width="30" height="24">
<img src="images/whatsapp-logo-light-green-png-0.png" alt="Whatsapp logo" width="30" height="24">
</div>
</div>
</nav>
Here you go...
You have to link href with the id of the section you want to scroll to.
See the snippet below.
#first-section {
width: 100%;
height: 1000px;
background-color: red;
}
#second-section {
width: 100%;
height: 1000px;
background-color: blue;
}
#third-section {
width: 100%;
height: 1000px;
background-color: green;
}
#fourth-section {
width: 100%;
height: 1000px;
background-color: purple;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#first-section">First section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#second-section">Second section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#third-section">Third section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fourth-section">Fourth section</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="first-section">First section</div>
<div id="second-section">Second section</div>
<div id="third-section">Third section</div>
<div id="fourth-section">Fourth section</div>
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>
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
This question already has answers here:
Bootstrap 4: Dropdown menu is going off to the right of the screen
(6 answers)
Closed 4 years ago.
I am using Bootstrap 4 for a very simple navbar, I just noticed that my right-aligned dropdown opens... on the right which creates an overflow (ie. the horizontal scrollbar of the webbrowser is showing up).
This is the code the navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shopping List</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
Manage
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
</div>
</nav>
And the related codepen: https://codepen.io/ehouarn-perret/pen/MLoGdE
How to make that right-aligned dropdown to open the menu on the left?
Add dropdown-menu-right to your dropdown-menu class, like this:
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
This will align your dropdown menu to the right, instead of the default that is to the left.
Try This :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shopping List</a>
</li>
</ul>
<ul class="navbar-nav dropleft">
<li class="dropdown">
<a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
Manage
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
</div>
At the moment, the _dropdown.scss of Bootstrap is setting left: 0px to .dropdown-menu.
If you add the below to your CSS, it should override this.
.dropdown-menu {
right: 0px;
left: auto;
}
Perhaps add a unique class and target that so that you don't break anything else.
according to Dropdown menu causes scrollbar
adding dropdown-menu-right to your dropdown-menu should do the trick
I want to put my content in a navbar to 3 different 'columns'. All i want is logo on the left (checked) some nav-items on the center (checked) and the last element (Get The App) on the right and that's a problem.
Here's my code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/Logo.png"></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 mx-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Home
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
<li class="nav-item active">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Get The App</a>
</li>
</ul>
</div>
</nav>
and CSS:
.navbar-nav.mr-auto ul li a.nav-link {
justify-content: right;
display: flex;
flex-wrap: wrap; }
And this is my result:
I would appreciate any help, thanks ;)
Remove the mr-auto class from your last .navbar-nav.
That class applies margin-right: auto !important to your element, which makes it push against the right margin, just like mx-auto applies the same auto to both x sides (left and right).
See it working:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/Logo.png"></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 mx-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Home
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
<li class="nav-item active">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Get The App</a>
</li>
</ul>
</div>
</nav>
you have to get rid of the margin-right: auto !important of the class .mr-auto.
Simply remove the class .mr-auto if you don't need it.
https://codepen.io/blackcityhenry/pen/bQYxyV