I am having issues aligning a dropdown menu on the navbar-brand portion of the Bootstrap 4 Navbar. For some reason it is aligning to the top left of the page.
I have tried the following code below and am not sure how to go from there.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WebsiteName
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/>WebsiteName</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Popular Subdomains</h6>
<a class="dropdown-item" href="/">Subdomain 2</a><a class="dropdown-item" href="/">Subdomain 3</a> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="/">All Subdomains</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/two-link/">Two Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>
</nav>
just curiosity , are you tring to make your brand is dropdown cause its a big mistake try to read this docs to see how its work
https://getbootstrap.com/docs/4.2/components/navbar/
you can also position your navbar by using float or flex alignment as you wish
Related
I've been searching for it all day and couldn't find a solution, so I hope I won't look like an idiot when in 2 minutes someone will post an answered link for the exact question.
I am trying to create a navbar like on steamdb
Where the search box remains after the navbar collapse and is just reduced in size.
But I ran into the problem where if I set the navbar to <nav class="navbar-expand-lg" </nav> then when it collapses it split into 3 lines, one for the brand, one for search, and one for toggle dropdown.
If I remove the "-lg" then it doesn't split, but then it also doesn't change the items to toggle.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">My Company Name</a>
<form class="d-flex w-100 d-inline-block">
<div class="input-group">
<input class="form-control no-border" type="text" placeholder="search for game..." id="example-search-input">
<span class="input-group-append">
<button class="btn rounded-pill" type="button">
<i class="bi bi-search"></i>
</button>
</span>
</div>
</form>
<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 active" aria-current="page" href="/">Home</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">
content
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/test1">test1</a></li>
<li><a class="dropdown-item" href="/test2">test2</a></li>
<li><a class="dropdown-item" href="/test3">test3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Donate</a>
</li>
</ul>
</div>
</div>
</nav>
https://www.codeply.com/p/uaWJpGVRED
Please help, I've been stuck on this all day
You need to use 2 inner divs inside the container. Make them both w-100, and the first one d-flex so that the brand and form layout horizontally...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<div class="d-flex w-100">
<a class="navbar-brand" href="/">My Company Name</a>
<form class="d-flex w-100 d-inline-block">
<div class="input-group">
<input class="form-control no-border" type="text" placeholder="search for game..." id="example-search-input">
<span class="input-group-append">
<button class="btn rounded-pill" type="button">
<i class="bi bi-search"></i>
</button>
</span>
</div>
</form>
<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>
<div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</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"> content </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/test1">test1</a></li>
<li><a class="dropdown-item" href="/test2">something</a></li>
<li><a class="dropdown-item" href="/test3">bla bla</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Donate</a>
</li>
</ul>
</div>
</div>
</nav>
Demo
I'm trying to achieve the following layout with a bootstrap 4 navbar:
--Brand---------------------------Partner brand--
--Item1--Item2--Item3--------------------Logout--
I have two problems:
Everything displays on the same line, having the class of "row"
There's no gap, depite using mr-auto on the left hand item list
I have this code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<div class="row">
<div class="navbar-brand flex-column">
<a href="/">
<span class="my-logo"></span> <span class="nav-name">Brand name</span>
<small class="nav-strap">Catchy strapline</small>
</a>
Partner Name
<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>
</div>
<div class="row">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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>
</ul>
<form class="form-inline my-2 my-lg-0">
logged in as blah
</form>
</div>
</div>
</div>
</nav>
I have experience mostly with BS3 and can't figure out why this isn't working.
**Use following code snippet:**
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container flex-column border">
<div class="row w-100">
<div class="navbar-brand justify-content-between d-flex w-100 m-0">
<a href="/">
<span class="my-logo"></span> <span class="nav-name">Brand name</span>
<small class="nav-strap">Catchy strapline</small>
</a>
Partner Name
<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>
</div>
<div class="row w-100">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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>
</ul>
<form class="form-inline my-2 my-lg-0">
logged in as blah
</form>
</div>
</div>
</div>
</nav>
I'm using Twitter Boostrap 4 and have a navbar with 2 menus :
one menu for the general navigation
one menu for the account
On small devices, no problem : the two togglers are displaying correctly
On large devices, i want to show only the general navigation and not the account navigation. My problem : the account navivation is showing and i don't know how to hide it on large devices ?
<!-- logo -->
<a class="navbar-brand" href="#" class="d-inline-block align-top">
<img src="https://www.n9ws.com/images/upload/google-220118055200.png" />
</a>
<span class="d-none d-sm-inline" style="font-size:17px;text-shadow: 0.15em 0.15em #333;display:inline;color:white"><strong>Calendrier</strong> collaboratif des <strong>stages d'Aïkido</strong> en <strong>France</strong></span>
<!-- global menu toggle -->
<button class="navbar-toggler order-first" 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>
<!-- account toggle -->
<button class="navbar-toggler" style="padding: 0.55rem 0.70rem;" type="button" data-toggle="collapse" data-target="#navbarMonCompte" aria-controls="navbarMonCompte" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user"></i>
</button>
<!-- account -->
<div class="collapse navbar-collapse justify-content-end" id="navbarMonCompte">
<ul class="navbar-nav float-right text-right">
<li class="nav-item ">
<a class="nav-link" href="#">Change email</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Change password</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Disconnect</a>
</li>
</ul>
</div>
<!-- gloab menu -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link <?php echo ($this->menuSelected == 'accueil') ? 'active' : '';?>" href="/index2/index/">Accueil <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo ($this->menuSelected == 'calendrier') ? 'active' : '';?>" href="/calendrier2/calendrier/">Calendrier</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enseignants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Vidéos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comptes-rendus</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">
A propos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Change email</a>
<a class="dropdown-item" href="#">Change password</a>
<a class="dropdown-item" href="#">Disconnect</a>
</div>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<button type="button" class="btn btn-sm my-2 my-sm-0 btn-primary" data-toggle="modal" data-target="#my-modal-connexion">
Connexion
</button>
</div>
</div>
Have you got an idea ?
Thank you.
Eric
Target the navbar you want to hide by its id and give it a style of display:none to hide it on bigger devices i.e. min-width: 992px.
For eg: If you want to hide navbarMonCompte. The css will be as shown below.
#media only screen and (min-width: 992px) {
#navbarMonCompte {
display: none !important;
}
}
EDIT - To answer OP's new question in comments
On small devices, if i click on the 'account toggler" then on the 'global menu toggler', the 2 dropdown are shown. Is it possible to hide the other dropdow when a dropdown is shown ?
$('button[data-target=my-modal-connexion]').click(function() {
if($('#navbarSupportedContent').hasClass('show'))
$('#navbarSupportedContent').removeClass('show');
});
The above-given jQuery will check if the navbar is open or not when the account toggler is clicked. If it is open, it will be closed.
Try adding a hide-account class to the account button and put this into your css.
#media only screen and (min-width: 992px) {
.hide-account {
display: none;
}}
jsfiddle: https://jsfiddle.net/sfto2qhw/1/
You need to add d-block d-md-none to your account Toggler button you can use d-sm-none or d-lg-none instead of d-md-none as per your breakpoint
<!-- logo -->
<a class="navbar-brand" href="#" class="d-inline-block align-top">
<img src="https://www.n9ws.com/images/upload/google-220118055200.png" />
</a>
<span class="d-none d-sm-inline" style="font-size:17px;text-shadow: 0.15em 0.15em #333;display:inline;color:white"><strong>Calendrier</strong> collaboratif des <strong>stages d'Aïkido</strong> en <strong>France</strong></span>
<!-- global menu toggle -->
<button class="navbar-toggler order-first" 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>
<!-- account toggle -->
<button class="navbar-toggler d-block d-md-none" style="padding: 0.55rem 0.70rem;" type="button" data-toggle="collapse" data-target="#navbarMonCompte" aria-controls="navbarMonCompte" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user"></i>
</button>
<!-- account -->
<div class="collapse navbar-collapse justify-content-end" id="navbarMonCompte">
<ul class="navbar-nav float-right text-right">
<li class="nav-item ">
<a class="nav-link" href="#">Change email</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Change password</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Disconnect</a>
</li>
</ul>
</div>
<!-- gloab menu -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link <?php echo ($this->menuSelected == 'accueil') ? 'active' : '';?>" href="/index2/index/">Accueil <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo ($this->menuSelected == 'calendrier') ? 'active' : '';?>" href="/calendrier2/calendrier/">Calendrier</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enseignants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Vidéos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comptes-rendus</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">
A propos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Change email</a>
<a class="dropdown-item" href="#">Change password</a>
<a class="dropdown-item" href="#">Disconnect</a>
</div>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<button type="button" class="btn btn-sm my-2 my-sm-0 btn-primary" data-toggle="modal" data-target="#my-modal-connexion">
Connexion
</button>
</div>
</div>
I need to fix the below bootstrap code to fixed on the top of a web page while scrolling down. How can it do? please help me..
Here the bootstrap code that I have. Please help me to change this code from static to fixed while scrolling down the web page.
<div class="header_top" id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right mx-auto" 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 active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</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">
Drop Down
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"></a>
<a class="dropdown-item" href="gallery.html">Gallery</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="404.html">Services</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
...
read this document for more details
https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top
you can use css:
nav{
position: fixed;
}
actually what was written behind the class navbar-fixed-top
You can add:<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
data-spy="affix" data-offset-fop="scroll amount"
You can see this link for example:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&stacked=h
Another example: https://www.codeply.com/go/LDHQhWUG0x
I am learning bootstrap 4 navbar but i was not able to understand clearly how to position objects in navbar i want a search box to be placed at the center of navbar and a button on right but i was only able to do it navbar is not getting aligned at center.
<div class="collapse navbar-collapse text-xs-center" id="mynavbar">
<div class="col-lg-4 form-inline navbar-form">
<div class="input-group">
<form class="form-inline my-lg-0">
<input class="form-control " type="text" placeholder="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
<ul class="navbar-nav w-100 justify-content-end">
<li class="nav-item" style="margin-right: 15px;">
<div class="btn-group">
<a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<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>
</div>
</li>
</ul>
</div>
There are different methods for Navbar alignment in Bootstrap 4. One way is to use mx-auto on the content to center (the form)...
<nav class="navbar navbar-expand navbar-light bg-faded">
<div class="navbar-collapse collapse" id="mynavbar">
<form class="form-inline mx-auto">
<div class="input-group my-lg-0">
<input class="form-control " type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn" type="submit">Search</button>
</span>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<div class="btn-group">
<a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<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>
</div>
</li>
</ul>
</div>
</nav>
But the search form will not be perfectly centered because there is no content in the left, and the form will be pushed slight left by the button on the right.
So in this case, I'd recommend using the flexbox utility classes..
<nav class="navbar navbar-expand navbar-light bg-faded">
<div class="navbar-collapse collapse" id="mynavbar">
<span class="navbar-text w-100"> </span>
<form class="form-inline w-100 justify-content-center">
<div class="input-group my-lg-0">
<input class="form-control " type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn" type="submit">Search</button>
</span>
</div>
</form>
<ul class="navbar-nav w-100 justify-content-end">
<li class="nav-item">
<div class="btn-group">
<a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<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>
</div>
</li>
</ul>
</div>
</nav>
Demo of both centering methods