So I've been boxing with Bootstrap-5 and the "new" way to create a navbar, and I all most got it how I want it. But for some reason I cant seem to get the last element aligned to the right, anyone got some suggestions?
Here is what it looks like now: https://jsfiddle.net/FoTL_Development/428wyt6q/72/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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>
<span class="navbar-toggler">Brand Name</span> <!-- Get the hide/apper effect but without the style -->
<!-- Left Element -->
<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="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
</ul>
</div>
<!-- End Left Element -->
<!-- Center Element -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 m-auto">
<li>Center</li>
</ul>
</div>
<!-- End Center Element -->
<!-- Right Element -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li>Right</li>
</ul>
</div>
<!-- End Right Element -->
</div>
</nav>
You would use ms-auto to push the last element to the right...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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>
<span class="navbar-toggler">Brand Name</span> <!-- Get the hide/apper effect but without the style -->
<!-- Left Element -->
<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="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
</ul>
</div>
<!-- End Left Element -->
<!-- Center Element -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 m-auto">
<li>Center</li>
</ul>
</div>
<!-- End Center Element -->
<!-- Right Element -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li>Right</li>
</ul>
</div>
<!-- End Right Element -->
</div>
</nav>
https://codeply.com/p/y2YCYHmcYQ
Also it appears you have an unnecessary me-auto on the center nav.
Related
Using Bootstrap 5 with Bootstrap Icons, I also enlarged the icon using font-size:1.5rem;, but that broke the vertical alignment for the links (If you remove the styling you can see it's working again, need to be in Full Page mode)
I could not find the correct way to vertically align it again:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" id="mainNav">
<div class="container">
<a class="navbar-brand fw-bold" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="bi-list"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0 text-center d-flex align-items-center">
<li class="nav-item"><a class="nav-link me-lg-3" href="#">Menu Item #1</a></li>
<li class="nav-item"><a role="button" class="nav-link me-lg-3"><i class="bi bi-stack-overflow" style="font-size:1.5rem;"></i>Menu Item With Icon</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="#">Menu Item #3</a></li>
</ul>
</div>
</div>
</nav>
Try adding the "d-flex" and "align-items-center" classes to that nav-link:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" id="mainNav">
<div class="container">
<a class="navbar-brand fw-bold" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="bi-list"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0 text-center d-flex align-items-center">
<li class="nav-item"><a class="nav-link me-lg-3" href="#">Menu Item #1</a></li>
<li class="nav-item"><a role="button" class="d-flex align-items-center nav-link me-lg-3"><i class="bi bi-stack-overflow" style="font-size:1.5rem;"></i>Menu Item With Icon</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="#">Menu Item #3</a></li>
</ul>
</div>
</div>
</nav>
I am trying to use navbar with fixed-top class so that the menu will not pull down the element of the page when it is collapsed. But when I use the fixed-top class, the navbar will go over the container (in width) as if it was inside a container-fluid while i use a container class to have the menu and the site in the middle of the page (not a full width). Is there a way to have a navbar with fixed-top but not at full width?
This is the code:
<div class="container" style="border: 1px solid;">
<nav class="navbar fixed-top navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="n-index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatti</a>
</li>
</ul>
</div>
</div>
</nav>
</div> <!-- end container -->
When using position:fixed the element is removed from the normal DOM flow so it no longer relates to other page elements including its parent container.
If you want limit the navbar to the container width, use the container inside the navbar to wrap the navbar content...
<nav class="navbar fixed-top navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="n-index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatti</a>
</li>
</ul>
</div>
</div>
</nav>
https://codeply.com/p/AFQj4wf6DD
Here is my code :
<nav class="navbar navbar-expand-sm navbar-dark ">
<div class="container-fluid">
<a class="navbar-brand" href="#">LOREM IPSUM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<p class="navbar-text">lorem Ipsum Dolor</p>
<li class="nav-item ">
<a class="nav-link" href="#">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">IPSUM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DOLOR</a>
</li>
</ul>
</div>
</div>
</nav>
The result produced by this:
How to change line after "lorem ipsum dolor" and show my all nav links(in same line) in separate line , I have tried display:block but it is not working. Any help will be appreciated !
To display nav links in separate line and create a vertical navbar remove .navbar-expand-sm class from nav.
<nav class="navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">LOREM IPSUM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<p class="navbar-text">lorem Ipsum Dolor</p>
<li class="nav-item ">
<a class="nav-link" href="#">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">IPSUM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DOLOR</a>
</li>
</ul>
</div>
</div>
</nav>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<nav class="navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">LOREM IPSUM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-wrap" id="collapsibleNavbar">
<div class="w-100"><p class="navbar-text">lorem Ipsum Dolor</p></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="#">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">IPSUM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DOLOR</a>
</li>
</ul>
</div>
</div>
</nav>
None of the answers helped or worked , trick was to create a separate div and float it to right side with navbar text and a collapsible navbar inside it , here is the code :
<nav class="navbar navbar-expand-sm navbar-dark ">
<div class="container-fluid">
<a class="navbar-brand" href="#">LOREM IPSUM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="float-right ">
<p class="navbar-text">lorem Ipsum Dolor</p>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link" href="#">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">IPSUM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DOLOR</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Result:
I'm trying to code a navbar using bootstrap 4, that will show a collapsible button in xs screen sizes and below. I achieved this, however when the button is clicked, the nav links push the button and brand name down, and appear above them, within the navbar. I want them to appear below the navbar.
Can anybody help me with this?
<header>
<nav class="navbar navbar-default">
<div class="container-fluid bg-light ">
<div class="navbar-brand">
<a id="dominik" href="index.html"><h1>Food, LLC</h1></a>
</div>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-light p-4">
</div>
<ul id="nav-list" class="nav navbar-nav navbar-collapse">
<li class="nav-item active">
<a class="nav-link" href="#">
<br>Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<br>Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<br>Sushi</a>
</li>
</ul><!-- #nav-list -->
</div>
<nav class="navbar navbar-light bg-light d-sm-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
you are not doing navbar as it is in Official Bootstrap Documentation, in addition, you are putting two nav inside each other which is not mentioned in their documentation.
You can easily copy the navbar code from the documentation as is and then change the names of URLs as you like.
Check this jsfiddle.
Update Code with this
<header>
<nav class="navbar navbar-default">
<div class="container-fluid bg-light ">
<div class="navbar-brand">
<a id="dominik" href="index.html"><h1>Food, LLC</h1></a>
</div>
<nav class="navbar navbar-light bg-light d-sm-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-light p-4">
</div>
<ul id="nav-list" class="nav navbar-nav navbar-collapse">
<li class="nav-item active">
<a class="nav-link" href="#">
<br>Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<br>Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<br>Sushi</a>
</li>
</ul><!-- #nav-list -->
</div>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
When the screen size is moved to sm, then the logout button width takes up the whole screen and the nav bar hamburger icon goes in the middle:
This is how it looks when it's normal:
Here is the code for it:
<!-- navbar -->
<nav class="navbar navbar-toggleable-sm bg-info navbar-inverse">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Training</a>
<a class="nav-item nav-link" href="#">LOGOUT</a>
</div>
</div>
</div>
Logout
</nav>
check out that code. It works
#media(max-width:777px){
.btn-danger{
max-width:70px!important;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-sm bg-info navbar-inverse">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Training</a>
<a class="nav-item nav-link" href="#">LOGOUT</a>
</div>
</div>
</div>
Logout
</nav>
here you also have it on codepen.io
https://codepen.io/hansfranz/pen/owmVod
What I did was setting up a media Query here you can define the behavior for a specific width.
Hope that helps if not leave a comment :)
Using flexbox to organize the layout.
#media screen and (max-width:640px) {
nav.navbar,
.container {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0!important;
}
nav .btn.btn-danger {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- navbar -->
<nav class="navbar navbar-toggleable-sm bg-info navbar-inverse">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Training</a>
<a class="nav-item nav-link" href="#">LOGOUT</a>
</div>
</div>
</div>
Logout
</nav>
You should not leave the logout link outside the navbar div. Here is an example that could help.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link Button</li>
</ul>
</div>
</div>
</nav>