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">
Related
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
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 2 years ago.
I'm working with bootstrap,
and I have this navbar:
<nav className="navbar navbar-expand-sm navbar-light bg-light">
<a className="navbar-brand" href="#">Lead Manager</a>
<button className="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav my-2 my-lg-0">
<li className="nav-item">
<Link to="/register" className="navbar-link">Register</Link>
</li>
<li className="nav-item">
<Link to="/login" className="navbar-link">Login</Link>
</li>
</ul>
</div>
</nav>
I am using boostrap cdn 4.4.1:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/flatly/bootstrap.min.css" />
I am trying to achieve this:
And yet, I keep getting this:
What am I missing?
Thanks!
Try adding ml-auto to the end of the class list for the <ul> containing 'Register' and 'Login'
Just add <div class="navbar-nav mr-auto"></div> right after <div class="collapse navbar-collapse" id="navbarSupportedContent">. Also change the class name navbar-link as nav-link of your <Link/> components.
See the demo: https://jsfiddle.net/rnm617jz/1/
Note: I have changed the className attr as class, since I don't have React in the demo and wanted to test it without it.
just add ml-auto class next to navbar-nav, will do the trick.
<ul className="navbar-nav ml-auto my-2 my-lg-0">
to fix your navbar links change navbar-link class to nav-link
<Link to="/" className="nav-link">sample</Link>
I'm trying to make dropdown navbar box black, I've been looking for solution for 2 days, but still even templates from bootstrap docs doesn't work properly, I mean that dropdown box.
Here is my html code for navbar:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-link"><img src="/images /logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Courses </li>
<li role="presentation">Help
<a class="visible-sm-block" href="#"> </a>
</li>
</ul>
</div>
</div>
</nav>
Here is Page hierarchy:
You're correctly using .navbar-inverse, which should already be making your navbar black, as can be seen here.
There are a couple of reasons why this may not be working for you.
You've not referenced Bootstrap correctly.In this case, check for errors in your F12 Developer Tools' console.
You're using CSS for a different version of Bootstrap than the one you've loaded.
You have code that is overriding the defaults with higher specificity.
You have cached outdated CSS. Refresh your stylesheet refrence with CTRL + F5, and hold SHIFT while clicking on the refresh icon to ensure you clear your CSS cache as well.
Hope this helps! :)
I've used bootstrap-ui to create a collapsable navbar, and added in a custom high-contrast-mode toggle, styled to look like the collapse toggle:
<nav class="navbar navbar-default navbar-fixed-top dark" ng-controller="NavBarController">
<header class="container container-fluid">
<div class="navbar-header">
<button tabindex="0" type="button" name="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="false" aria-controlls="navbar">
<span class="sr-only">Toggle navigation</span>
<i role="img" class="fa fa-bars"></i>
</button>
<high-contrast-switch class="btn navbar-btn navbar-right navbar-toggle">
<i role="img" class="fa text-white fa-adjust" aria-label="High Contrast Mode"></i>
</high-contrast-switch>
<h1 class="logo navbar-text">Kupat Givat HaMivtar</h1>
</div>
<div uib-collapse="isCollapsed" class="navbar-collapse collapse" aria-expanded="true">
<ul class="nav navbar-nav navbar-right">
<li du-scrollspy="donate"><a du-smooth-scroll="donate">Donate</a></li>
<li du-scrollspy="about"><a du-smooth-scroll="about">About</a></li>
<li du-scrollspy="stories"><a du-smooth-scroll="stories">Stories</a></li>
<li du-scrollspy="contact"><a du-smooth-scroll="contact">Contact</a></li>
</ul>
</div>
</header>
</nav>
As you can see, I've given the collapse control a tabindex, but the button is still not keyboard-accessible at screen-xs resolutions. This gif illustrates how tabbing through the page focusses (in order)
the high-c toggle
the page title
the first nav item in my secondary nav.
I've tested disabling the secondary nav, but there seems to be no conflict
How do I enable keyboard-accessibility of the navbar toggle button?
Turns out I had a typo in my markup. Instead of aria-controlls="navbar" it should be aria-controls="navbar"
button elements are keyboard focusable by default, without the need to add tabindex or do anything else. likely you're doing something else in your code that's interfering?
I want to make a nav bar that automatically turns into a Menu button and collapses when you minimize your browser
I want it to be exactly like this one http://php1.emagid.net/~laurenbe/
I looked up tutorials but every tutorial only teaches us how to do the bar static to the top of the page. Any suggestions?
This is part of bootstrap, the Navbar
At it's most basic, you want to do this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<div class="btn btn-primary">Menu</div>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can then use custom CSS styles to over-ride bootstraps native styling.
It's all about responsive design, so you can have help here : http://getbootstrap.com/css/#grid.
Here : http://getbootstrap.com/css/
And a beginner video for bootstrap if you're not familiar with it : https://www.youtube.com/watch?v=no-Ntkc836w