Bootstrap navbar collapsed button doesn't disappear when display gets larger - html

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.

Related

Bootstrap navbar-toggler

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

Navbar "button" does not expand on mobile (no JavaScript/JQuery)

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 do I get nav menu to collapse on mobile but not on desktop?

I'm trying to get my nav menu to collapse on mobile devices, but not on desktops.
Adding data-toggle="collapse" data-target="#navbarResponsive" seems to work, but then nav items also collapse when they're clicked on a desktop device.
<div class="py-0 px-3 fixed-top">
<nav class="navbar container navbar-transparent navbar-padded navbar-expand-md">
<a class="navbar-brand" href="#">
Logo
</a>
<button
class="navbar-toggler navbar-toggler-right d-md-none"
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 text-uppercase" id="navbarResponsive">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" data-toggle="collapse" data-target="#navbarResponsive">
<a class="nav-link"href="#link1">link1</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target="#navbarResponsive">
<a class="nav-link" href="#link2">link2</a>
</li>
</ul>
</div>
</nav>
</div>
Change the data-target to the mobile collapsed version: .navbar-collapse.show
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link" href="#link1">link1</a>
</li>
Demo: https://www.codeply.com/go/qBh0qJYekK
Related: How to hide collapsible Bootstrap 4 navbar on click

Bootstrap 4 navbar not working properly on small screen sizes [duplicate]

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>

issues with hamburger menu bootstrap

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