I have a navbar that looks like this on a computer. On mobile, the home and contact options automatically get hidden and a button appears in the top-right corner. It's three horizontal lines that are meant to click on to expand home and contact options.
However, when I click on the button on mobile, it does not expand the options. It does nothing at all (only shows that it was clicked on by rendering a yellowish box around it).
My code for the navbar:
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" data-toggle="collapse" style="background-color: steelblue; text-color: white;">
<div class="container">
<a class="navbar-brand" style="text-align: left;" href="index.html">
<div style="font-family: MyWebFont;;"><b>My website</b></div>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true"
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">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Related
i'm new to web development in general and I have this issue with Bootstrap:
the navbar on a large display
the button should be visible only on smaller screens (on the right and than collapse), but when the display gets larger - the button sticks to my navbar-logo instead of disappearing :\
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a href="#" class="navbar-brand"
><img src="img/logo.png" alt="Logo"
/></a>
<!-- dropdown btn -->
<button
class="navbar-toggle collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
>
<span class="navbar-toggler-icon"></span>
</button>
<!-- nav-links -->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
home
</li>
<li class="nav-item">
about
</li>
<li class="nav-item">
services
</li>
<li class="nav-item">
team
</li>
<li class="nav-item">
connect
</li>
</ul>
</div>
</div>
</nav>
You should change your <button class="navbar-toggle collapsed" to <button class="navbar-toggler"
With your code it states that the navbar is always in "collapsed" state, so it doesnt work. If my anwser helped pls upvote it and check is as answered!
The only issue here is with your button. I would make a slightly bigger change than the one suggested by Hakfo:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
This will mean that the button only appears on smaller screens and will disappear everywhere else.
So, I'm messing with bootstrap for the first time, figuring out how things work. I've made good progress with navbars, but I'm absolutely stumped about the navbar-toggler.
<nav class="nav navbar-expand-sm navbar-dark">
<a class="navbar-brand" href="" id="homeOverride"> <span class="overrideFonts"> Home </span> </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">
<a class="nav-link" href=""> <span class="overrideFonts"> Projects </span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href=""> <span class="overrideFonts"> Contact </span> </a>
</li>
</ul>
</div>
</nav>
It seems like no matter what I do, whenever the page hits that sm breakpoint, the navbar-toggler sticks to the navbar-brand link element -- It's like it's aligned left, or something. I have tried literally everything I could think of. Basically, what I'm wanting to happen is once my page hits that breakpoint and the various list items are hidden, I want that navbar-toggler to be aligned to the right side of the page. Right now, it looks like it's aligned left, and basically nothing I'm doing is overriding that behavior.
I've tried adding navbar-toggler-right, I tried giving a custom ID to override the behavior with maybe float: right !important; --
Navbar Behavior
All I'm trying to do is get that button to the right side of that page when the breakpoint is hit
Just change this line
<nav class="nav navbar-expand-sm navbar-dark">
TO
<nav class="navbar navbar-expand-sm navbar-dark">
Add these classes
To navbar
justify-content-between justify-content-sm-start
To #navbarSupportedContent
flex-grow-0 flex-sm-grow-1
Code
<nav class="nav navbar-expand-sm navbar-dark justify-content-between justify-content-sm-start">
<a class="navbar-brand" href="" id="homeOverride"> <span class="overrideFonts"> Home </span> </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 flex-grow-0 flex-sm-grow-1" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href=""> <span class="overrideFonts"> Projects </span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href=""> <span class="overrideFonts"> Contact </span> </a>
</li>
</ul>
</div>
</nav>
More info here
https://getbootstrap.com/docs/4.3/utilities/flex/#justify-content ,
https://getbootstrap.com/docs/4.3/utilities/flex/#grow-and-shrink
This question already has answers here:
bootstrap 4 nav doesn't display hamburger on resize
(2 answers)
Closed 4 years ago.
I'm currently trying to implement a navbar that turns the navbar selections into a dropdown at small screen sizes (as the documentation shows here. However, the button which should toggle the navbar items displaying is not showing up. It is rendered in the html but the button is empty and upon clicking the button which is responsible for collapsing the navbar, nothing displays (no dropdown of options, where id expect a "home" link and a "login/regiser" button)
Navbar markup:
<nav class="navbar navbar-expand-lg primary">
<a class="navbar-brand" href="/">Blazor Finances</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<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>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a>
</li>
</ul>
</div>
</nav>
which works fine on large screen sizes, but looks as follows on small devices:
and a screenshot showing the navbar toggling button is rendered but doesn't seem to be displayed and isn't operable:
Add navbar-light or navbar-dark (for a dark background) to your navbar - these classes are responsible to add the hamburger. See demo below:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light navbar-expand-lg primary">
<a class="navbar-brand" href="/">Blazor Finances</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<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>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a>
</li>
</ul>
</div>
</nav>
TLDR:
How do I stop the bootstrap menu (hamburger) icon from moving up when clicked, (I need it to stay fixed on the navbar)
How do I position the "Book" button so that it stays on top right of the navbar after expanding the menu. (fixed position top right)
I created a simple bootstrap menu which works perfectly on desktop. On mobile however I get this weird behaviour where
when the menu icon is clicked: it shifts a few pixels upwards, then when the menu is closed it shifts back to it's normal position.
After doing a few usability tests, this behaviour has been identified as annoying. It's also been identified that the "Book" button which shows on the closed navbar on mobile moves to the bottom of the navbar when it's opened. Is it possible to stop this behaviour? I would like the button to stay top right when the menu is opened.
Html Code:
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<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">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">Vans</a>
</li>
<li class="nav-item">
<a class="nav-link">Contract</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">App</a>
</li>
</ul>
</div>
<form class="form-inline my-2 my-lg-0">
<a class="btn btn-outline-primary btn-book my-2 my-sm-0" >Book</a>
</form>
</div>
</nav>
Your menu button is moving because of the "Book" button.
Insert it before the collapse element, rearrange your elements with order-lg-1 and order-lg-2 and it should work just fine.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<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>
<form class="form-inline my-2 my-lg-0 order-lg-2">
<a class="btn btn-outline-primary btn-book my-2 my-sm-0" >Book</a>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto order-lg-1">
<li class="nav-item active">
<a class="nav-link">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">Vans</a>
</li>
<li class="nav-item">
<a class="nav-link">Contract</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">App</a>
</li>
</ul>
</div>
</div>
</nav>
i have class for replacing my class container i called it container-mini
so far good not problem but when, in the mobile screen it have problem on hamburger menu like this
here my simple header code
<nav class="navbar navbar-toggleable-md navbar-light my-4" id="navna">
<div class="container-mini">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#site-nav" aria-controls="site-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand logona" href="/dusbam/id/">
<h1>LOGO</h1>
</a>
<div class="collapse navbar-collapse" id="site-nav">
<ul class="navbar-nav text-sm-left ml-auto">
<li class="nav-item">
<a class="nav-link" href="/dusbam/id/rooms">Kamar</a>
</li>
</ul>
</div>
</div>
</nav>
but when i replace container-mini with container it's fine like this
so my question is how to make hamburger menu like pict 2 without class container