Wondering why my Bootstrap toggler isn't working. Viewed a few other thread on a similar issue appearing, but didn't find an appropriate solution since everything seems in order.
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
Frontend Bootcamp\
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
What You'll Learn
</li>
<li class="nav-item">
Questions
</li>
<li class="nav-item">
Instructors
</li>
</ul>
</div>
</div>
</nav>
</html>
if you are questioning why your icon does not appear, it's because of it's color, use text-white class to make it visible (or add .navbar-inverse to your navbar)
if your collapse is not working it's probably because you did not link bootstrap.js in your project
https://jsfiddle.net/mahdiar_mansouri/3u5jvw1d/5/
this fiddle is based on your code, it has the icon visible (two icons actually, one from bs itself another from bootstrap icon package) and it's collapse is working fine
Related
I am trying to create a responsive navbar that works in a fashion such that I have two sets of right-aligned links. The first set should collapse, but the second set should remain visible at all times, with the toggler to the left of the latter set of links. That means, in the snippet below, that "Link One", "Link Two", and "Link Three" should collapse, but "Link Four" and "Link Five" should remain visible. This is a very simplified version of what Facebook does with their navbar.
Unfortunately, this is the closest that I have been able to get, though. Before the toggler is shown, everything is where it should be. When I expand, however, "Link Four" and "Link Five" drop to the bottom of the navbar, instead of staying at the top. I have tried manipulating the second set of links directly, via CSS, and could also not seem to accomplish what I was looking for.
Any feedback would be greatly appreciated, as front-end development is definitely not my strong suit.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
[Brand]
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Link One
</li>
<li class="nav-item">
Link Two
</li>
<li class="nav-item">
Link Three
</li>
</ul>
</div>
<ul class="navbar-nav ms-auto flex-row">
<li class="nav-item">
Link Four
</li>
<li class="nav-item">
Link Five
</li>
</ul>
</nav>
Looks like you just need to use the ordering classes to get what you want. In this case order-md-last on the 2nd set of links, and then they will be natural order (2) on less than md breakpoints (xs,sm):
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
[Brand]
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ms-auto flex-row order-md-last">
<li class="nav-item">
Link Four
</li>
<li class="nav-item">
Link Five
</li>
</ul>
<div class="collapse navbar-collapse" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Link One
</li>
<li class="nav-item">
Link Two
</li>
<li class="nav-item">
Link Three
</li>
</ul>
</div>
</nav>
responsive demo
Below is picture of where I am now. I always face this problem of not being able to place things flexibly using bootstrap. In this case, I would like to place all the buttons in the center using justify-content: center, but the built-in class of navbar-expand-sm apparently defaults to justify-content: flex-start. What should I do? Thanks
![Text](https://stacenter image description here
<nav class="navbar bg-danger navbar-dark position-relative">
<div class="navbar-expand-sm">
<div class="container-xxl">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<!-- How to put the buttons in the middle? -->
<ul class="navbar-nav">
<li class="nav-item ml-3">
Login
</li>
<li class="nav-item">
Other Service
</li>
<li class="nav-item">
My Blog
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
Either add justify-content-center next to navbar-expand-sm and see if this is working
Or trying adding the respective CSS
.navbar-expand-sm { justify-content: center !important; }
I am essentially trying to create active classes with Bootstrap to display a nav-pill/container around the active section of my webpage. This works fine on larger screens, but on smaller screens, with the hamburger menu active the nav-pill stretches across the entire div/container, but I want it to wrap around only the word similar to when it is a large screen.
Here is a codepen with some filler content to mimic my issue: https://codepen.io/100emoji/pen/mdxdpzp
and the code for the navbar only:
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Body -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="400" data-bs-smooth-scroll="true">
<!-- Navigation Bar-->
<nav id="navbar" class="navbar navbar-expand-md bg-dark navbar-dark py-3 sticky-top">
<div class="container">
Ken's Art & Frame
<button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon mid-bar"></span>
<span class="toggler-icon bot-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav nav-pills ms-auto">
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Artwork
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
I can only find solutions using bootstrap 4 through google
https://getbootstrap.com/docs/5.0/components/navbar/#containers
I think this is what you are looking for. Essentially you wrap a container around your UL to control the size.
The other option is to use the bootstrap width classes on each individual <li> like this:
<li class="nav-item w-50">
Or do it via CSS on <li> tags:
li {
width: 30%;
}
I am trying to create my header using bootstrap so that when it is in anything larger than small screen all that shows up is the brand and the links do not display, but when the screen is in small there is the collapsible button.
My site is #:
https://jspurling22.github.io/coursera-test/module3-sol/index.html
<div id="collapsable-nav" class="collapse navbar-collapse d-block d-sm-none">
<ul id="nav-list" class="nav navbar-nav navbar-right ">
<li class="link-button">
Chicken
</li>
<li class="link-button">
Beef
</li>
<li class="link-button">
Sushi
</li>
</ul>
</div>
I added the d-block d-sm-none and tried it in the div and the ul spots but nothing is working for me.
Any help would be great.
Thanks!
If I understood your question probably you should use the class navbar-expand-[sm-md-lg] which is all you need to hide the links.
<div id="collapsable-nav" class="collapse navbar-collapse navbar-expand-sm"> </div>
I also recommend upgrading to bootstrap 4 since bootstrap 5 is already up.
Do please let me know if that didn't help.
First off the problem was that I was using Bootstrap 3 and calling Bootstrap 4. Changed to bootstrap 4, added .navbar-expand-xs like:
<nav class="navbar navbar-expand-xs navbar-dark bg-dark">
and added .d-block and .d-sm-none to the button
<button class="navbar-toggler d-block d-sm-none" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
So I'm following a tutorial online (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/) and following the code exactly, but for some reason, my navbar is not appearing the way it should be. My friend (who's way more experienced with web dev) took a quick look at the code and couldn't figure out what was wrong. So I thought I'd post my problem here.
I'll also show you my working directory (just in case you're wondering if the files are all in the same directory):
Here's the code in case you want to try it yourself
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I had a similar problem using bootstrap v4. The previous answers code worked well for me but just wanted to clarify that the part that made the vertical navbar horizontal was to use navbar-expand-lg in the main div tag.
<nav class="navbar navbar-expand-lg">
Changing the lg to another size (md, sm or xs) is also helpful depending on your screen sizing preferences.
Hope this helps
I'm asuming you are using the latest Bootstrap.
You have to add navbar-defaultto your <div class="navbar"> and navbar-nav to your <ul class="nav">.
Which gives you the following markup.
<div class="container">
<h1>Bootstrap Site</h1>
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Working Example
For future problems, try reading the official Bootstrap Docs before asking here. They explained everything very detailed.
BT Navbar
I guess your problem is, that the sitepoint tutorial uses an older Bootstrap Version, than the one you downloaded and use.
If you want your navbar to be always horizontal just make it like this:
<nav class="navbar navbar-expand">
Using navbar-expand-lg|md|sm will make it always break at some point to vertical position.
In my case I was trying some codes I found on internet based on Bootstrap version 3 but my app was based on bootstrap version 4. There exist important differences between the two versions (see here).
The following code based on v4 works for me :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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="#">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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The official documentation can be found here.
came across your question because I was looking to create a vertical navbar with bootstrap. I know that this question is to do the exact opposite, but since this thread was at the top of the pile on google while searching "bootstrap nav list vertical", I figured I'd leave the solution I found here.
For anyone who can't seem to get bootstrap to behave and render a vertical list, you can use the bootstrap class ".flex-column" in your tag to turn a horizontal list into a vertical one.
Here's the page in the Bootstrap documentation, scroll down till you find the subheading 'Vertical':
Cheers!
we should use pills or tabs //A grey horizontal navbar that becomes vertical on small screens // for tabs use - nav nav-tabs
<nav class="navbar navbar-expand-sm-bg-light">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href ="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href ="#">Projects</a></li>
</ul>
</nav>
Change the class of the ul tag to <ul class="nav navbar-nav">.