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>
Related
<!-- 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 creating a vertical nav - top ul list will align to top and the other one to the bottom. Right now my nav looks like two columns instead of one long list of items: https://www.dropbox.com/s/3pmwuih7xij51fj/Screen%20Shot%202019-12-28%20at%2010.41.34%20PM.png?dl=0
Here is a quick photoshop work to show what I am expecting (all menu items in one column):
I tried adding w-100 but I can't get them to align to one col. How do I create a break between the two?
<div class="container-fluid">
<div class="row">
<div class="col-1" style="background-color: aliceblue; height: 600px;">
<nav class="navbar navbar-expand-md flex-column p-0"> <a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" 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 flex-column">
<li class="nav-item active"> <a class="nav-link" href="#">Help <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
</ul>
<ul class="navbar-nav flex-column">
<li class="nav-item active"> <a class="nav-link" href="#">Help <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
</ul>
</div>
</nav>
</div>
</div>
</div>
You should add flex-column to the div #navbarsExampleDefault and between the 2 ul you can add hr to seperate them out and later style it.
<div class="container-fluid">
<div class="row">
<div class="col-1" style="background-color: aliceblue; height: 600px;">
<nav class="navbar navbar-expand-md flex-column p-0"> <a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" 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 flex-column" id="navbarsExampleDefault">
<ul class="navbar-nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="#">
Help <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
</ul>
<hr>
<ul class="navbar-nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="#">
Help <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
</ul>
</div>
</nav>
</div>
</div>
I have navigation bar that collapses on windows resize. Besides the usual stuff in nav bar like about, contact...etc, i have two social media links (facebook and twitter). After i resize window, both of the social media items jump to the right of collapsed bar and also show up in the "dropdown" of the collapsed bar.
I would like for the social media items to show on the left of the so called dropdown button and for them to not show up in the collapsed bar.
I've tried this by sourcing them outside of collapsed bar div, but nothing changes.
Any help?
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="navbar-social">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
</div>
</nav>
For visual:
https://jsfiddle.net/8ay2g0tL/3/
Thank you!
RESULT
im not sure if this is the best practice or not, but the way i finally was able to hide it from collapsed navbar is by setting it to display: none
like this:
#media only screen and (max-width: 998px) {
#navbarfbtw{
display:none;
}
}
Just wrap the class="navbar-social" inside the parent class="collapse navbar-collapse", Also there is no reason to use <div class="navbar-social"> so just add social li items (with navbar-social class) in the parent ul element like this:
Updated JsFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item navbar-social">
</li>
<li class="nav-item navbar-social">
</li>
</ul>
</div>
</div>
</nav>
It's to do with the order in which the elements are rendered on the page.
The collapsed menu is being "un-hidden" and shunting your icons out of place.
Simply put the "navbar-social" div BEFORE the "navbarForCollapse" div.
https://jsfiddle.net/16x8jhu4/9/
<div class="navbar-social">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
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;">
I have this navbar and I'm trying to make it collapse so all the links and the button on the right will collapse to a burger menu that, when clicked on, will show a black background with the links listed vertically
```
<body>
<header id="nav-wrapper">
<img id="logo" src="images/event-logo.png" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="nav-list active"><a class="link" href="">HOME</a></li>
<li class="nav-list"><a class="link" href="">SPEAKERS</a></li>
<li class="nav-list"><a class="link" href="">AGENDA</a></li>
<li class="nav-list"><a class="link" href="">SPONSORS</a></li>
<li class="nav-list"><a class="link" href="">MEDIA</a></li>
<li class="nav-list"><a class="link" href="">disruptHR</a></li>
<li class="nav-list"><a class="link" href="">TRAVEL</a></li>
<li class="nav-list"><a class="link" href="">FLOORPLAN</a></li>
<li class="link">MORE</li>
<button id="tickets-btn">GET TICKETS</button>
</ul>
</div>
</nav>
</header>
</body>
```
https://v4-alpha.getbootstrap.com/components/navbar/
just the documentation of bootstrap 4, below the code with your links:
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-list nav-item active"><a class="link nav-link" href="">HOME</a></li>
<li class="nav-list nav-item"><a class="link nav-link" href="">SPEAKERS</a></li>
<li class="nav-list nav-item"><a class="link nav-link" href="">AGENDA</a></li>
<li class="nav-list nav-item"><a class="link nav-link" href="">SPONSORS</a></li>
<li class="nav-list nav-item"><a class="link nav-link" href="">MEDIA</a></li>
<li class="nav-list nav-item"><a class="link nav-link" href="">disruptHR</a></li>
<li class="nav-list nav-item"><a class="link nav-link" href="">TRAVEL</a></li>
<li class="nav-list nav-item"><a class="link nav-link" href="">FLOORPLAN</a></li>
<li class="link nav-item"> MORE </li>
<li class="nav-item"><button id="tickets-btn">GET TICKETS</button></li>
</ul>
</div>
</nav>
</body>
Read the navbar docs. Bootstrap 4 is now beta.
https://www.codeply.com/go/4GM7ligFGu
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#"><img id="logo" src="//placehold.it/130x30"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPEAKERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AGENDA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPONSORS</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/4GM7ligFGu