My bootstrap navbar is always visible on mobile. No matter if navbar-toggler is collapsed or not.
Here is the code.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/"><i class="fas fa-blog"></i> Tech Info</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-row-reverse collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="nav justify-content-end">
<% if(!user) { %>
<li class="nav-item">
<a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary my-2 my-sm-0" href="/register">Sign Up</a>
</li>
<% } %>
</ul>
</div>
</div>
</nav>
The d-flex class is overriding the navbar-collapse behavior. If you want to reverse the flex direction use it on the nav element instead...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/"><i class="fas fa-blog"></i> Tech Info</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="nav justify-content-end flex-row-reverse">
<li class="nav-item">
<a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
</li>
</ul>
</div>
</div>
</nav>
Demo: https://www.codeply.com/p/MgNaErmlWm
The target of the button must be equal to the div id you want to collapse, and remove the d-flex from the div.navbar-collapse
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
...
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
...
</div>
navbar should not be a container generally. Try taking div class="container " out.
Related
I'm new to front-end development and I am trying to design a page that also has a searchbox(here's the jsfiddle https://jsfiddle.net/he40tr9z/1/). I copied the navbar component from https://getbootstrap.com/docs/5.0/components/navbar/ and did some minimal modifications to make the searchbox appear before the nav items and to right align the nav items. Now I want the searchbox to stretch from the navbar-brand to the nav items but I can't seem to do that. I've searched the web and all the solutions I've found were for previous versions of Bootstrap which when applied to Bootstrap 5 don't work.
Here's my code snippet:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="Brand image" width="180" height="52"></img></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">
<form class="d-flex ms-auto me-auto">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search"></input>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
Here is the code from my css file:
#searchbox{
width: 100%;
}
I put width:100% cause I saw it in this solution Bootstrap: stretching navbar input box but it doesn't work for Bootstrap 5.
Just use w-100 on the containing form...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="//via.placeholder.com/180x52" alt="Brand image" width="180" height="52"></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">
<form class="d-flex ms-auto me-auto border w-100">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
Codeply
I want to have the nav-bar such that the name of the company is on the left with items X and Y on the right. I tried using justify-content-right as suggested in bootstrap documentation but it doesn't work.
<header>
<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
<a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>
<!--Creates a clickable button with a toggle icon once the screen collapses-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px; href="x.php">X <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px; href="y.php">Y<a>
</li>
</ul>
</div>
</nav>
<header>
Edit: I removed mr-auto class and that seemed to do the trick!
You forgot to close style attribute
<header>
<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
<a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>
<!--Creates a clickable button with a toggle icon once the screen collapses-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px"; href="x.php">X <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px"; href="y.php">Y<a>
</li>
</ul>
</div>
</nav>
<header>
I have a navbar for bootstrap 4 and the nav-brand centered on computer window, but it will moving to dropdown when expand the toggle on mobile. Does there any way to make the brand fixed on top and center?
my navbar code on html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<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 justify-content-start" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
class="fas fa-store mr-3"></i>Product
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="...">..</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="/" style="color: papayawhip"><i class="fas fa-home mr-3"></i>Home
<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto" href="/"><img src="....." style="max-height: 60px" /></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav"><li class="nav-item">
<a>...</a>
</li>
</ul>
</div>
</nav>
try doing this so the navbar-brand
<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>
so the navbar-brand is outside the navbarNavDropdown
I'm trying to get a navbar with two items (a ngbdropdown and a link) and when I reduce the resolution the toggler is displayed, but I click on it and it doesn't do anything.
This is my html code: (Missing the nav tag at the end, I put it here but doesn't detect it).
<nav class="navbar navbar-expand-lg navbar-light navbar-toggleable-md" role="navigation">
<a class="navbar-brand ml-3 margin-items" href="#"><img src="../assets/GroupeRenault.png" alt="groupeRenault"></a>
<button
class="navbar-toggler collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="true"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto" >
<li class="nav-item mr-2 padding-items">
<a style="color:#666" href="https://dda-localhost:4200/dashboard" >{{this.userLanguage}}</a>
</li>
<li class="nav-item ">
<div
ngbDropdown
class="d-inline-block"
>
<button
class="bNombre"
id="dropdownForm1"
ngbDropdownToggle
>
{{this.userName}}
</button>
<div ngbDropdownMenu aria-labelledby="dropdownForm1">
<button ngbDropdownItem (click)="this.logout()">Logout</button>
</div>
</div>
</li>
</ul>
</div>
Just make the following changes, ie just add or remove class named show on button click
component.ts
isNavbarMobile: boolean = false;
component.html
<nav class="navbar navbar-expand-lg navbar-light navbar-toggleable-md" role="navigation">
<a class="navbar-brand ml-3 margin-items" href="#"><img src="../assets/GroupeRenault.png" alt="groupeRenault"></a>
<button (click)="isNavbarMobile = !isNavbarMobile" class="navbar-toggler collapsed" type="button" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [ngClass]="{'show': isNavbarMobile}" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto" >
<li class="nav-item mr-2 padding-items">
<a style="color:#666" href="https://dda-localhost:4200/dashboard" >{{this.userLanguage}}</a>
</li>
<li class="nav-item ">
<div ngbDropdown class="d-inline-block" >
<button class="bNombre" id="dropdownForm1" ngbDropdownToggle >
{{this.userName}}
</button>
<div ngbDropdownMenu aria-labelledby="dropdownForm1">
<button ngbDropdownItem (click)="this.logout()">Logout</button>
</div>
</div>
</li>
</ul>
</div>
</nav>
I want to center navbar brand on large screen.
I don't understand what i'm doing wrong and what should i do ? . please help!
i want something like this: https://www.codeply.com/go/6P65Rawdw4/bootstrap-4-navbar-center-links-examples .
<nav class="navbar fixed-top navbar-expand-sm navbar-light " id="MyNavControl">
<a class="navbar-brand mx-auto" href="#home">BRAND BRAND</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">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#AboutSection">About</a>
</li>
</ul>
<form class="ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</nav>
Updated after comment
Try this
<nav class="navbar fixed-top navbar-expand-sm navbar-light " id="MyNavControl">
<a class="navbar-brand mx-auto" href="#home">BRAND BRAND</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 mx-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#AboutSection">About</a>
</li>
</ul>
</div>
<form class="ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</nav>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<nav class="navbar fixed-top navbar-expand-sm navbar-light " id="MyNavControl">
<a class="navbar-brand mx-auto" href="#home">BRAND BRAND</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 mx-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#AboutSection">About</a>
</li>
</ul>
</div>
<form class="ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</nav>