I have a situation where I would like to display the Hamburger Menu on Both Desktop and Mobile, the following code works well on mobile but on desktop, it shows full navigation, in desktop as well I would like to show the same hamburger menu and on the right of the screen on desktop, is that possible?
$(document).ready(function(){
$(".navbar-toggler").click(function(){
$(".navbar-collapse").toggle();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<title>Responsive Header</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign</a>
</li>
</ul>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Remove navbar-expand-md
Change
<nav class="navbar navbar-expand-md navbar-light bg-light">
to
<nav class="navbar navbar-light bg-light">
Related
This question already has answers here:
How to add hamburger menu in bootstrap
(3 answers)
Closed 2 months ago.
I tried placing the js cdn in top and it did not work. I was trying to make my navbar responsive and used toggler. The navbar became responsive but the toggler button is not working.
Here is my code, the hamburger menu is not working:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="NssavbarSupportedContent" 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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>
For Bootstrap V5 it's data-bs-toggle not data-toggle, plus you needed a "#" to point the target to an ID not a class. Lastly you had a typo "NssavbarSupportedContent" should be "navbarSupportedContent".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>
I'm having a bit of an issue where my dropdown won't work using bootstrap.
The dropdown only appears from screens smaller than the $md variable.
The issue is when I click the dropdown icon it doesn't seem to be working
I have the HTML code below but if you want the whole project take a look at this Github repo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Sass-Bootstrap Example</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-primary ">
<a class="navbar-brand text-primary_invert px-3" href="#">Navbar</a>
<button class="navbar-toggler bg-primary_invert" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-primary_invert" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-primary_invert" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary_invert" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled text-primary_invert" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<script src="/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
try adding the JQuery & Popper.js links
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
more info here.
I've run into a small issue whilst using Bootstrap. Every time I expand my menu (burger icon) it doesn't collapse after I attempt to close it. Could you please let me know where I've gone wrong & what I could do to avoid this issue in the future, thank you.
<body>
<nav id="mainNavBar" class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">CANDY</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TICKETS</a>
</li>
</ul>
</div>
</nav>`
</body>
emphasized text
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav id="mainNavBar" class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">CANDY</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TICKETS</a>
</li>
</ul>
</div>
</nav>
`
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
I try it and works perfectly. Make sure you are using correct bootstrap version.
I did research on the internet but I couldn't solve my problem because my English is bad. I apologize. I open the subject again. My navbar toogle not working.
ı didnt understand. where is my problem?
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="css/jquery-3.5.0.js"></script>
<div class="container-fluid mt-3 p-0">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#" id="navbaritem"><span style="color:skyblue" >FİRMA</span> ADI</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#nvbCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Bootstrap 4 navbar
You have not added any menu item. Nor have you given any menu item using the collapse class, what will it do and what it shows.
Try this and put your content inside it.
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin:24px 0;">
<a class="navbar-brand" href="#" id="navbaritem"><span style="color:skyblue" >FİRMA</span> ADI</a>
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#Mymenu" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="Mymenu" >
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">menu 3</a>
</li>
</ul>
</div>
</nav>
</div>
what is wrong with this code before all my hair fallout.
<img src="logo.png" alt="Ask a local" class="img-fluid w-35">"The most trusted local community"
<button class=" navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" id="zeropadding">
<span class="d-md-none" id="zeropadding"><i class="fas fa-align-left " >Menu </i></span> </button></div> <!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul></nav>
Here's a responsive Bootstrap collapsible navigation bar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul>
</ul>
</div>
</div>
</nav>
</body>
</html>
</body>
</html>
I'm sorry... but your code is really terrible! Same ID twice, </div> never open, text without tag... really terrible! (^_^;)
I do not know where to start... maybe it's better if you read the bootstrap documentation http://getbootstrap.com/docs/4.1/getting-started/introduction/.
Now your menu works (I cleaned your HTML as best as I could), but you have to use HTML&CSS better because as it is, it is not a good work, sorry.
BTW, hope it helps you to improve your web designer techniques.
Cheers :)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">
<a href="index.php"><img src="logo.png" alt="Ask a local" class="img-fluid w-35">
"The most trusted local community"</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" id="zeropadding">
<i class="fas fa-align-left">Menu</i>
</button>
<div class="collapse navbar-collapse bg-light" id="myTogglerNav"> <!-- Links -->
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul>
</div>
</nav>