Given the code below is the supposed behavior that the button is hidden at lg and xl; while the collapsed content is only toggeable at md or is it toggeable from md downto xs? Can someone help explain this?
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-md" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav 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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
It becomes toggleable at medium and is from medium down.
The navbar-toggleable-* means that *from * down it is able to be toggled*.
I have been working with this today, and that is the behavior that I have seen and is described in bootstrap docs
Used navbar-expand- This means it always in collapsed mode
Related
I'm working on my first html/css project ever, and I'm using bootstrap. I have a little html experience using Blogger in the past.
When my navbar is expanded, I want the first li item (a button) to float to the left of the page, and the rest of it to float right.
I can get all the items to float one way or the other using flex-start or flex-end but I can't seem to apply it to this single element. I tried using the margin-right property to force it as well, but the results were pretty inconsistent.
I've gone through a bunch of codeply samples as well, and the only other solution I found was treating the button like a logo, which wouldn't collapse into the navigation menu when it became a hamburger.
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Any custom CSS I wrote to override bootstrap was just for colors and fonts, so I don't think it would affect anything, but I can add it if anyone needs to double check.
Thanks in advance.
This code seems to place the 'Download Resume' button to the left on medium size screens and larger
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div id="main-navigation" style="" class="navbar-collapse justify-content-between collapse">
<div>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
You can set the first li's width: 100% so that it takes all the available spaces from the left.
And use flex-end on the parent (ul) element to make the rest of the child move to the right.
.navbar-nav{
display: flex;
justify-content: flex-end;
}
.navbar-nav li:first-child{
width: 100%;
}
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="`enter code here`">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Linkedin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Email</a>
</li>
</ul>
</div>
</div>
</nav>
This is the navbar in html made with BootStrap. but somehow it does not show up on the mobile any tips of how to change this? I have tried a lot and I looked over previous questions aswell but nothing helped
As you can see in the Bootstrap 5 docs...
"Navbars can use .navbar-toggler, .navbar-collapse, and
.navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their
content collapses behind a button"
Your code is missing the toggler...
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="`enter code here`">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Linkedin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Email</a>
</li>
</ul>
</div>
</div>
</nav>
Demo
Also note the data attributes have changed in Bootstrap 5
I am very new to learning Bootstrap, my navbar is not collapsing, furthermore, I want my three list items Home, Features and Pricing to be on left whereas sign up and login on the right.
I was successfully able to scale my image using CSS (id = brandimg). Please fix this issue.
My markup is:
<nav class="navbar navbar-default navbar-light navbar-expand" style="background-color: #3ab3f0">
<div class="container collapse navbar-collapse">
<div class="navbar-header">
<span class="navbar-brand">
<img src="https://images8.alphacoders.com/416/416969.jpg" id="brandimg">
AnmGal
</span>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
This should work for you:
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
However, I would recommend you to read this https://getbootstrap.com/docs/4.3/components/navbar/ you will learn all you need about bootstrap navbars.
If you are use bootstrap 4 then try this:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
<a class="navbar-brand" href="#"><img src="https://images8.alphacoders.com/416/416969.jpg" id="brandimg">
AnmGal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mr-0">
<li class="nav-item">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<div class="right-menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
experts,
I am trying to upgrade to bootstrap 4, and I am having a hard time with the flex containers.
For some reason, my navbar menu links both submenu and mainmenu are not aligned right. However, when I remove the submenu ul content completely the main menu correctly aligns to the right.
what am I missing here?
thanks in advance.
https://codepen.io/orthix/pen/ZobjMa
<nav class="header navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container">
<div class="navbar-brand">
Logo
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
Menu
</button>
<div class="collapse navbar-collapse flex-column align-items-end" id="navbarMenu">
<div class="row">
<ul class="col-12 navbar-nav navbar-submenu ml-auto order-last">
<li class="nav-item">
<a class="nav-item nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#">Link</a>
</li>
</ul>
<ul class="col-12 navbar-nav ml-auto order-xs-first order-md-last">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-sm btn-outline-secondary" href="#">button 1</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-sm btn-danger text-white" href="#">button 2</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
You need to use justify-content-end utility class.
Here is working codepen: https://codepen.io/anon/pen/rvOZBK
Read more about flexbox utility classes for justifying content here: https://getbootstrap.com/docs/4.1/utilities/flex/#justify-content
I am working on a website, what I want to achieve is that the navbar of my page stacked over the slider.
I have tried z-index property.
My HTML Code:
<nav class="navbar navbar-expand-md bg-danger navbar-dark sticky-top container custom-navi" style="z-index: 2">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
</div></nav>
What I want to achieve is shown in the below image :
What I have right now is :
Bootstrap 4 has class the fixed-top for this purpose.
<nav class="navbar navbar-expand-md bg-danger navbar-dark fixed-top custom-navi">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
</div></nav>
The fixed-top answer by ZimSystem is a good one, but in the event that you don't want the position to be fixed, you could set the navbar to be absolute. Bootstrap 4 has the class position-absolute for that (though it would take more work to center the navbar horizontally).
if you wana put your slider behind your navbar try the below css code for your slider and navbar
.slider{
position:absolute;
top:0;
z-index:0;
}
.navbar-nav{
z-index:1;
}