Make navbar collapsible with bootstrap - html

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

Related

Navbar is not showing up on mobile

<!-- 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

image is not responsive with the header

the logo image fits nicely when the tab is full, but when i decreases the size of the tab, the logo doesnt stay inside the header
<header class="">
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="index.html"
><img
src="assets/images/logoo.png"
alt="logo"
style="max-width:30%;height;"
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="products.html">Our Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

Can't align unordered lists with 'flex-column'

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>

Alignment issues and navbar is not collapsing

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>

adding components before hamburger bootstrap4

I've got a navbar in Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="row">
<div class="w-100">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/svg/stopa-logo.svg" width="120">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu-margined-right">
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">We Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav lang-right">
<li class="nav-link">
<a class="nav-item" href="#">CZ</a>
</li>
<li class="nav-link">
<a class="nav-item" href="#">EN</a>
</li>
</ul>
</nav>
</div>
</header>
and I want to make that the language switch links will be before "MENU" burger, is this possible?:
LINK
Any ideas how I can do that? I haven't been able to find a solution.

Make ul absolute and place it with top and right coordinates.
Set both ul and li's to inline-block.
Example below:
ul.nav.navbar-nav.lang-right {
position: absolute;
right: 160px;
top: 7px;
display: inline-block;
}
li.nav-link {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<header class="row">
<div class="w-100">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/svg/stopa-logo.svg" width="120">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu-margined-right">
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">We Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav lang-right">
<li class="nav-link">
<a class="nav-item" href="#">CZ</a>
</li>
<li class="nav-link">
<a class="nav-item" href="#">EN</a>
</li>
</ul>
</nav>
</div>
</header>