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
Related
I am using Angular 12 and Bootstrap 5 to create a SPA. I created a shared navbar component. When my navbar changes to the hamburger menu button, the navbar does collapse as intended. But when i try to close it, there is no reaction. Am i missing something?
<nav class="navbar fixed-top navbar-expand-md navbar-dark shadow">
<div class="container-fluid">
<a class="navbar-brand" routerLink="/someUrl">Foo</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarToggleContent"
aria-controls="navbarToggleContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggleContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item p-2">
Item 1
</li>
<li class="nav-item p-2">
Item 2
</li>
<li class="nav-item p-2">
Item 3
</li>
</ul>
</div>
</div>
</nav>
This code is fine. I forget to add the popper.js entry to my angular.json file.
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
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>
How to set the bootstrap 4 navbar height in all viewport to 80px ?
I tried "min-height: 80px" in ".navbar" but the navbar is broken.
The sass code:
$navbar-bg: #26f3fd;
$navbar-height: 80px;
.navbar {
background-color: $navbar-bg;
min-height: $navbar-height;
}
The html code:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="main-navbar" data-toggle="sticky-onscroll">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbar-content">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="<?= esc_url(home_url('/')); ?>">Accueil</a>
</li>
</ul>
</div>
http://codepen.io/juavenel/pen/xqMPrQ/
The issue is because your navbar doesn't contain a navbar-brand so it's height collapses when the navbar stacks vertically.
This is a known issue that will be fixed in the beta release: https://github.com/twbs/bootstrap/pull/22230
The workaround is to include an empty placehold navbar-text or navbar-brand..
<nav class="navbar navbar-toggleable-md navbar-light bg-faded py-3" id="main-navbar">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-text"> </span>
<div class="collapse navbar-collapse justify-content-md-center" id="navbar-content">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/FIKesgfDhL
Also, you can use vertical padding (py-3) instead to increase the height of the navbar and keep items vertically centered.