I'm unable to open the hamburger menu while using bootstrap. Would somebody please tell me what the issue is with the code?
I've pulled the code directly from the bootstrap website. I've looked at others' questions regarding this problem, but the suggested solutions haven't helped.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="200" height="200" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
</div>
</nav>
Please explain this for me very simply, as I'm new to coding. I want to be able to open the hamburger menu on a mobile device.
data-target and the id were not the same.
You need the jquery and bootstrap.js for the dropdown to work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="50" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
</div>
</nav>
<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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
for people looking for a solution in bootstrap 5, you should replace data-target with data-bs-target.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#forum_navbar"
aria-controls="forum_navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Thank you all so much! This really helped.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<h1>HEY HEY HEY!<br/><i class="fas fa-yin-yang fa-spin"></i></h1>
</div>
</nav>
Sometimes people only import Bootstrap CSS CDN link. They need to be import JavaScript SDN link also for the Hamburger menu etc.
Something to note is the # in data-bs-target which references the id. I didn't notice this small element in the beginning and the hamburger menu wasn't working when clicked.
Related
I have a navbar from bootstrap that isn't collapsing. I have JQuery placed before bootstrap and all CDNJ in the right place but still isn't working.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light ">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="" class="d-inline-block align-top">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="nav ">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.php">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.php">Services</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" 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>
I am using Bootstrap 5
Edit: I solved the problem just removed the integrity from bootstrap.bundle.min.js and it worked
Using the button from Bootstrap docs with your id seems to work:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
https://getbootstrap.com/docs/5.0/components/navbar/
Edit: maybe you were using the wrong documentation from a previous version.
I've searched everywhere and have tried multiple things, but I just can't seem to get it to work with my code. I'm trying to change the default navbar-toggler hamburger button icon in bootstrap and use a custom Font Awesome icon. Here's my code:
HTML:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
<div class="container">
<!-- Logo Deciding Where To Put It-->
<!--<a class="navbar-brand" href="images/KevinLogo01.png"></a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcustom">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
span.navbar-toggler-icon::after {
color: white;
font: normal normal normal 14px/1 FontAwesome;
}
If you want to change it using just CSS, then this snippet could be the answer to your question-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/a03fb08303.js"></script>
<style>
.navbar-dark .navbar-toggler-icon {
background-image: none;
}
.navbar-dark .navbar-toggler-icon::after {
content: "\f0c9";
font-family: "FontAwesome";
font-size: 22px;
color: #333;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
<div class="container">
<!-- Logo Deciding Where To Put It-->
<!--<a class="navbar-brand" href="images/KevinLogo01.png"></a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom" aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-dark" id="navbarcustom">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
And if you want to change it using just HTML, then this one could be the answer, delete the span in the navbar-toggler button and replace it with font-awesome like this-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x text-dark"></span>
</button>
Here is a full example in this snippet, lemme know which one helped you or you needed something else.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/a03fb08303.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
<div class="container">
<!-- Logo Deciding Where To Put It-->
<!--<a class="navbar-brand" href="images/KevinLogo01.png"></a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x text-dark"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcustom">
<ul class="navbar-nav ml-auto bg-dark">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Having issues with the collapsing menu still. According to the way bootstrap is set up, when it collapses, it should go into a straight vertical nav instead of still stretching horizontal. It only seems to end up vertically correct when at the lowest screen size and even though only displays correctly on one of the menus. Thank you Gary for pointing out and helping fix the first issue with the buttons and ID's
first image is how it's supposed to look
Correct Display
My Display
Here's the Snippet of code I put up on codely
<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav nav-navbar">
<li class="nav-item nav-link">
<a href="tel:1-702-555-5555">
<img src="image/phone.svg" height="15px" alt="Telephone"> (702)555-5555
</a>
</li>
<li class="nav-item nav-link">
<a href="mailto:mail#mail.com">
<img src="image/email.svg" height="15px" alt="Email"> mail#mail.com
</a>
</li>
<li class="nav-item nav-link" href="#">Premier Face Punching</li>
<li class="nav-item nav-link">
<a href="https://www.linkedin.com/company/Stuffnthings/">
<img src="image/linkedin.png" height="15px">
</a>
<a href="https://www.facebook.com/stuffnthings">
<img src="image/facebook.png" height="15px">
</a>
<a href="https://www.twitter.com/stuffnthings">
<img src="image/twitter.png" height="15px">
</a>
</li>
<li>
<input class="form-control border-secondary py-2" type="search" value="search">
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav nav-pills">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Web Design</a>
<a class="nav-item nav-link" href="#">Graphic Design</a>
<a class="nav-item nav-link" href="#">About US</a>
<a class="nav-item nav-link" href="#">Contact US</a>
</div>
</div>
</nav>
Your target attribute for both the navbar is same. Just replace the target attribute and the button works for different nav bar. And the navbar seems to become vertical when the width of the browser is less.
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav-navbar">
<li class="nav-item nav-link">
<a href="tel:1-702-555-5555">
<img src="image/phone.svg" height="15px" alt="Telephone"> (702)555-5555
</a>
</li>
<li class="nav-item nav-link">
<a href="mailto:mail#mail.com">
<img src="image/email.svg" height="15px" alt="Email"> mail#mail.com
</a>
</li>
<li class="nav-item nav-link" href="#">Premier Face Punching</li>
<li class="nav-item nav-link">
<a href="https://www.linkedin.com/company/Stuffnthings/">
<img src="image/linkedin.png" height="15px">
</a>
<a href="https://www.facebook.com/stuffnthings">
<img src="image/facebook.png" height="15px">
</a>
<a href="https://www.twitter.com/stuffnthings">
<img src="image/twitter.png" height="15px">
</a>
</li>
<li>
<input class="form-control border-secondary py-2" type="search" value="search">
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav-pills">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Web Design</a>
<a class="nav-item nav-link" href="#">Graphic Design</a>
<a class="nav-item nav-link" href="#">About US</a>
<a class="nav-item nav-link" href="#">Contact US</a>
</div>
</div>
</nav>
</body>
</html>
Basically my col's don't work or i am not doing something right?
Here's an image i attached bellow
P.S.: I am a newbie with bootstrap just got started with it so please don't get mad at small mistakes.
I am using Bootstrap version 4
Img here with the problem
Here's my code
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="images/amf-logo.jpg"
alt="amfLogo"
width="130px" height="40px"></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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galerie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</nav>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4"> <!-- you must close this -->
<p>
acxzcxzcxzcxzvcxzvcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxz
</p>
</div>
<div class="col-md-3 col-sm-4"
<p> azcxxxxxxxxxxxxxxxxxxxxsdazcxxxxx </p>
</div>
</div>
</div>
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-
vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js" integrity="sha384-
alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
I put the code into codepen and the page displays properly there. See for yourself:
https://codepen.io/dakata911/pen/mqagWO
I think this works fine. :)
Try this out...
If this doesn't work tell me what size screen you are viewing this on.
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="images/amf-logo.jpg"
alt="amfLogo"
width="130px" height="40px"></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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galerie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-4"> <!-- you must close this -->
<p>
acxzcxzcxzcxzvcxzvcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxz
</p>
So I've looked at dozens of posts about this kind of issue and haven't been able to find the answer. I am having an issue with my navbar menu toggle on collapse. When the browser width is smaller, the menu button shows, but clicking on the menu button does nothing. I need it to display the menu list, obviously. Here's the code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm bg-faded navbar-fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" 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>
<a id="header-initials" class="navbar-brand" href="home">JT</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>
Put the <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> after the <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I've tested the above changes. It will work.
Hi have you added the bootstrap.min.js to your code?
if not
add this code after jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
hope this helps
You have to need call bootstrap.js before closing </body> tag along with other JavaScript file. Example here
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm bg-faded navbar-fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" 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>
<a id="header-initials" class="navbar-brand" href="home">JT</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>