A newbie to bootstrap,I have a dropdown in a navbar in bootstrap 4.
Here is my code:
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse " >
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav-items">
<span class="navbar-toggler-icon"></span>
</button>
Flicker
<div class="collapse navbar-collapse" id="nav-items" >
<ul class="navbar-nav mr-auto">
<li class="nav-item active" href="#">
Home
</li>
<li class="nav-item">
Baidu
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disbabled</a>
</li>
<li class="nav-item">
DropDown<span class="caret"></span>
<ul class="dropdown-menu bg-inverse">
<li class="dropdown-item">Hello </li>
<li class="dropdown-item">Yeah </li>
</ul>
</li>
<form class="form-inline ">
<input class="form-control mr-sm-2" type="text" placeholder="Input">
<button class="btn btn-outline-success">Submit</button>
</form>
</ul>
</div>
</nav>
It turns out like this:
The dropdown is misplaced.What's going wrong? And how to fix it? Any help will be appreciated.
you need to add the class dropdown to your nav-item div
<li class="nav-item dropdown">
DropDown<span class="caret"></span>
<ul class="dropdown-menu bg-inverse">
<li class="dropdown-item">Hello </li>
<li class="dropdown-item">Yeah </li>
</ul>
</li>
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>
My Navigation bar disappears when the web page is shrinks, even clicking on the toggler when the page shrinks doesn't display the links at all. I am using bootstrap 4.0 and linking to cdn links
for both the css and other JavaScript needed and it keeps disappearing.
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
<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>
<div class="collapse navbar-collapse ml-2 top-bar" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home </a>
</li>
<li class="nav-item collections">
<a class="nav-link collections" href="#">Services</a>
<ul class="dropdown-menu dropdown-firstmenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">2014 <span class="dropdown-caret"><i class="fa fa-caret-right"></i></span></a>
</li>
</ul>
</li>
<li class="nav-item collections">
<a class="nav-link collections" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Downloads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<!-- drop down -->
<li class="nav-item collections">
<a class="nav-link collections" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<!-- end drop down -->
</ul>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
</ul>
I was able to fix this by downloading the bootstrap 4.0 css and changing the navbar display from display:none to display:block
<!-- 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>
I'm currently using the example from bootstrap called 'dashboard' I'm wanting to get the top navbar to actually tuck underneath the side navbar. Like this example: Image Example from Dribbble
I've put the dashboard code from bootstrap onto jsfiddle for ease of use for those that are willing to help (I really appreciate any help with this).
https://jsfiddle.net/1dy65wqx/
It should impact this:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
</nav>
I have changed few styles, please add this to your css file..
<div class="row" style="position:relative;">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar" style="position:fixed; z-index:2000; top:0px;">