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>
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 have such navigation and it would be responsive, but if I resize the windoes toogle button appear but it does not working.
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Container wrapper -->
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand me-2" asp-controller="Main" asp-action="MaIndex">
<i class="far fa-grin-beam-sweat"></i> Welcome
</a>
<!-- Toggle button -->
<button class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarButtonsExample"
aria-controls="navbarButtonsExample"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarButtonsExample">
<!-- Left links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Upload files</a>
</li>
</ul>
<!-- Left links -->
<div class="d-flex align-items-center">
<form method="post" asp-action="logout" asp-controller="account">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto">
#User.Identity.Name
</button>
</form>
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</div>
</nav>
<!-- Navbar -->
JS Fiddler attached https://jsfiddle.net/mygus/z9o4wk7u/3/
What am I doing wrong?
Thank you,
M.
this worked for me.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Navbar brand -->
<a class="navbar-brand me-2" asp-controller="Main" asp-action="MaIndex">
<i class="far fa-grin-beam-sweat"></i> Welcome
</a>
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<!-- Left links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Upload files</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="Administration" asp-action="ListRoles">List roles</a>
</li>
</ul>
<!-- Left links -->
<div class="d-flex align-items-center">
<form method="post" asp-action="logout" asp-controller="account">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto">
#User.Identity.Name
</button>
</form>
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</div>
</nav>
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.
I'm using Bootstrap 4. I'd like the navbar-brand item (which is just a text element) to be on the far right. The menu (as normal) defaults to the left.
I've tried applying ml-auto, mx-auto, mr-auto, pull-right, etc. Nothing does what I want.
mx-auto was nice for the small screen. It put the navbar-brand centered when the hamburger menu is there. However, I need something that works when the regular menu is there.
Here is my code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
You can use the order-last class. However, you'll probably want the brand to be still first/top on mobile screens, so you can use order responsively like this...
navbar-brand order-md-last
https://www.codeply.com/go/Vq7ajCEfsg
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
More on Bootstrap ordering
An alternate option is to use flex-row-reverse responsively on the parent navbar. This will switch the order of the brand and nav links, but only on the non-mobile menu.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu flex-md-row-reverse">
...
</nav>
And, if you want to keep the brand and toggler centered on mobile, you can wrap them in another div and still center with mx-auto: https://www.codeply.com/go/xXBdCHGAAN
Related:
Bootstrap 4 align navbar items to the right
Use .justify-content-md-end
<nav class="navbar navbar-expand navbar-dark bg-info">
<div class="container justify-content-md-end">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
how to put the navbar-brand on the right?
Add the order-md-last class to it (additionally to mx-auto that you experimented with).
That ordering class re-orders the element on screens that are medium (md) or larger. On smaller screens, no re-ordering happens and your mx-auto class gets applied.
Here's the code snippet with that order class applied:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
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>