menu toogle button not working in bootstrap 4 - javascript

In bootstrap 4 when the header becomes responsive the breadcrumb button not working as it is.
I have included the Bootstrap 4 CSS and bootstrap 4 js
please help me fix the issue
Code:
.navbar {
height:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container nopadding">
<a class="navbar-brand" href="#">
logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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>SERVICES</a>
</li>
<li class="nav-item">
<a>SUPPORT</a>
</li>
<li class="nav-item">
<a>TECHNOLOGY</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
Image:

Check you error in console Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
add jquery library before the bootstrap js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container nopadding">
<a class="navbar-brand" href="#">
logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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>SERVICES</a>
</li>
<li class="nav-item">
<a>SUPPORT</a>
</li>
<li class="nav-item">
<a>TECHNOLOGY</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Related

Bootstrap navbar dropdown menu not working

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.discoverhongkong.com/tc/index.html">快樂香港旅遊</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav me-auto">
<li class="nav-item active"><a class="nav-link" href="https://www.cathaypacific.com/cx/zh_HK.html">機票</a></li>
<li class="nav-item"><a class="nav-link" href="https://zh.hotels.com/">訂房</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://www.discoverhongkong.com/tc/plan/guided-tour.html?" role="button" data-bs-toggle="dropdown" aria-expanded="false">團體</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li class="dropdown-item" href="https://www.discoverhongkong.com/tc/explore/attractions.html">國內旅遊</li>
<li class="dropdown-item" href="https://www.discoverhongkong.com/tc/greater-bay-area.html">國外旅遊</li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="輸入景點">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<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>
<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>
Even though I had added the corresponding links and scripts from the Bootstrap documentation in my html, the navbar dropdown menu does not show the dropdown items after I clicked it. May I ask anything that I missed in order to have the dropdown menu function properly?
Remove one script you have two time call bootstrap js
Remove this
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js
Also not needed proper.js
Refer this - https://getbootstrap.com/docs/5.1/getting-started/introduction/#js
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.discoverhongkong.com/tc/index.html">快樂香港旅遊</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav me-auto">
<li class="nav-item active"><a class="nav-link" href="https://www.cathaypacific.com/cx/zh_HK.html">機票</a></li>
<li class="nav-item"><a class="nav-link" href="https://zh.hotels.com/">訂房</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://www.discoverhongkong.com/tc/plan/guided-tour.html?" role="button" data-bs-toggle="dropdown" aria-expanded="false">團體</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li class="dropdown-item" href="https://www.discoverhongkong.com/tc/explore/attractions.html">國內旅遊</li>
<li class="dropdown-item" href="https://www.discoverhongkong.com/tc/greater-bay-area.html">國外旅遊</li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="輸入景點">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<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>
</body>

Hi! I would like to customize the menu button that comes by default in bootstrap 4

I would like to customize the menu button that comes by default in Bootstrap 4. First, change the color and only leave the 3 lines without the border. And second, animate the button so that when opening it changes to an X. I share the nav code:
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</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 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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Solution to your problem
/* jQuery code to decide which icon to be populated whenever the navbar is toggled */
$('.fa-times').css('display', 'none');
$('.navbar-toggler').click(() => {
if ($('#navbar-button').hasClass('collapsed')) {
$('.fa-times').css('display', 'block');
$('.fa-bars').css('display', 'none');
} else {
$('.fa-times').css('display', 'none');
$('.fa-bars').css('display', 'block');
}
});
/* You can change the `background-color` and `color` option to customize the
color for your icon */
.navbar button {
background-color: yellow;
border: none;
}
.navbar button:focus {
outline: 0;
}
.fa-bars,
.fa-times {
background-color: inherit;
color: blue;
font-size: 2rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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/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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" id="navbar-button">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
You can view this solution in jsfiddle
I added border-0 class to remove border and bg-success to change background color.
<button class="navbar-toggler collapsed border-0 bg-success">
.navbar-toggler.collapsed .close-icon {
display: none;
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed border-0 bg-success" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<div class="close-icon py-1">✖</div>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>

how do I add functionality to bootstrap navbar

I have a bootstrap navigation menu when I resize the page to mobile size the burger menu does not work and I get an error in my console how can I fix it
<nav class="navbar navbar-expand-lg navbar-light">
<a href="home.html" class="navbar-brand ml-3 title-text">
<img src="img/Owi_Arts Logo2.png" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav text-uppercase">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Me
</li>
<li class="nav-item">
Gallery
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="social-text">
<a href="https://www.instagram.com/#owi_photography" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</div>
</nav>
Setting up Bootstrap like this works with your code. However, your <div class="social-text"> makes the improper spacing of the whole .navbar, so you'll have to change that around if you want to achieve the spacing and sizing directly from Bootstrap
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a href="home.html" class="navbar-brand ml-3 title-text">
<img src="img/Owi_Arts Logo2.png" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu"
aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav text-uppercase">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Me
</li>
<li class="nav-item">
Gallery
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="social-text">
<a href="https://www.instagram.com/#owi_photography" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

how to order items for desktop and mobile in bootstrap navbar

I am having some problems on the best way to order items correctly for desktop and mobile.
On the desktop mode I want to have (which is currently working):
search on the left
However, for mobile, I want to have:
hamburger icon in default position on the left, which currently is
search on the right, which currently is
brand in the center, but its not centering no matter what I do.
Can someone point out what I am doing wrong here? I am using flex ordering and margin autos to position the items, but the brand in mobile is refusing to position in the center.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-lg-fill">
<form class="form-inline mr-lg-auto order-sm-last mr-sm-auto">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<a class="navbar-brand ml-lg-auto order-lg-last" href="">Brand</a>
</div>
<div class="collapse navbar-collapse" id="collapse-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
The below code now works on mobile
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div><a class="navbar-brand ml-lg-auto order-lg-last" href="">Brand</a></div>
<div class="d-flex flex-lg-fill">
<form class="form-inline mr-lg-auto order-sm-last mr-sm-auto">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<div class="collapse navbar-collapse" id="collapse-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
Simply I have adjusted the navbar-brand using css to visible center. The search form will go down when smaller screen to avoid overlap with the logo. I hope this will work for you. If you need any further assistance drop your comment below.
.navbar-dark .navbar-brand {
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5px;
}
#media (max-width: 659px) {
.w-full {
width: 100% !important;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline w-full mt-2 mt-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<a class="navbar-brand mx-auto" href="">Brand</a>
<div class="collapse navbar-collapse" id="collapse-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>

Bootstrap 4 Navbar Collapse doesn't work

I have a problem with Bootstrap 4 navbar collapse feature.
I set it so that the navbar collapse in mobile viewport but instead of collapsing, it shows the items as a vertical list.
This is the code:
<html>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" aria-label="collapse" data-target="#navbarSupportedContent" aria-controls="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbarSupportedContent">
<a class="nav-link" href="#"><i class="far fa-dot-circle fa-lg pt-1"></i></a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
</div>
</div>
</nav>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm using a customized version of Bootstrap 4 (compiled from scss). I tried to use the standard version and it does show the button instead of the vertical list, but it doesn't work too. When I click on the list, nothing happens.
I checked the browser console but it doesn't show any error.
If it helps this is the compiled CSS: https://pastebin.com/jKYGC5A7
And this is the SCSS: https://pastebin.com/bbQNCAvh
The navbar work with ul li item, here is a working example
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">MENU <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENU</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Here is a link in Codepen https://codepen.io/anon/pen/LdZYbP
and here is a screenshot when you're on a mobile view
If you are using scss, make sure to import _transitions.scss.

Categories