bootstrap navbar dropdown not working after ajax call - javascript

I have a page that a user can comment on and the navbar dropdowns(both submenus and the menu itself when it automatically adjusts to a smaller screen) stop working properly. What's odd is that it stops working after the user adds every odd comment(1st, 3rd, 5th, etc.).
ajax:
$.ajax({
type: 'GET',
url: '/addComment',
data: {postId: postId, text: text},
success: function(data) {
$('#comments-container').append(data);
}
})
navbar:
<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="home"><img src="/imgs/it.png" width="50px"> catvas</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 {{#if home_active}}active{{/if}}">
<a class="nav-link" href="/home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item {{#if explore_active}}active{{/if}} dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-camera"></i> Explore
</a>
<ul role="menu" id="explore" name="explore" class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item {{#if adopt_active}}active-drop{{/if}}" href="/adoptCat"><i class="fas fa-heart"></i> Adopt a Cat</a>
<a class="dropdown-item {{#if catfeed_active}}active-drop{{/if}}" href="/catFeed"><i class="fas fa-comments"></i> View Catfeed</a>
</ul>
</li>
<li class="nav-item {{#if team_active}}active{{/if}}">
<a class="nav-link" href="/team"><i class="fas fa-code"></i> Meet the Team</a>
</li>
<li class="nav-item {{#if faq_active}}active{{/if}}">
<a class="nav-link" href="/faq"><i class="fas fa-question"></i> FAQ</a>
</li>
<li class="nav-item {{#if donate_active}}active{{/if}}">
<a class="nav-link" href="/donate"> <i class="fas fa-box-open"></i> Donate to Catvas</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item {{#if login_active}}active{{/if}}">
<a class="nav-link" href="/login"><i class="fas fa-cat"></i> Login </a>
</li>
<li class="nav-item {{#if signup_active}}active{{/if}}">
<a class="nav-link" href="/signup"><i class="fas fa-paw"></i> Sign Up</a>
</li>
</ul>
</div>
layout:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div id="navContainer">
{{> nav}}
</div>

Related

The toggler button is dropping down the list but it is not collapsing the list

I have copied every links which I have to. Also, copied the same code for the toggler which is in the bootstrap v5.1. The menu opens when I click on the toggler but it does not collapse if I click on it again. The code is working fine in bootstrap document but not in browser. Below is my code.
<html>
<head>
<title>Toggler</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-
bs-
toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</body>
</html>
I think it was a problem of script import.
This code works in my device:
<html>
<head>
<title>Toggler</title>
<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-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>

Collapse the Bootstrap burger menu when you click on a scrollspy link

How can you collapse the menu of a Bootstrap burger when you click on a scrollspy link?
When viewing my website on a smartphone, the bootstrap nav is reduced to a burger menu. If you click on a link that leads to a specific place in my index.html (such as #aboutMe) and not to an external page, then the navigation remains unfolded. I want it to collapse again afterwards.
You can view the code on: https://github.com/senkvalentin/personal_page or visit the website on: https://senkvalentin.com/
Here is a part of my html:
.h-100vh{
height:100vh;
}
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container">
<div class="row">
<nav class="navbar fixed-top navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="./img/logo.png" alt="">
</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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutMe">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#projectsList">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="!#" target="_blank">Server - Info</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="!#" target="_blank">Cloud - Server</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="home" class="h-100vh bg-warning">Home</div>
<div id="aboutMe" class="h-100vh bg-success">About Me</div>
<div id="projectsList" class="h-100vh bg-primary">Project</div>
I already looked at: How to hide collapsible Bootstrap navbar on click
And: Bootstrap panel-collapse collapses when you click on a link inside it is clicked
but nothing worked.
I'm using the latest version of jQuery and Bootstrap version 5.0.1:
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
In Jquery simply trigger click on the navbar-toggler button when link is clicked
$('.nav-link').click(function(){
$('.navbar-toggler').click();
});
$('.nav-link').click(function(){
$('.navbar-toggler').click();
});
.h-100vh{
height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container">
<div class="row">
<nav class="navbar fixed-top navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="./img/logo.png" alt="">
</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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutMe">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#projectsList">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="!#" target="_blank">Server - Info</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="!#" target="_blank">Cloud - Server</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="home" class="h-100vh bg-warning">Home</div>
<div id="aboutMe" class="h-100vh bg-success">About Me</div>
<div id="projectsList" class="h-100vh bg-primary">Project</div>
You first need to select all .nav-link excluding .dropdown-toggle.
Then, assign an event listener to toggle the .navbar-collapse on click:
$(document).ready(() => {
let $navlinks = $('.nav-link').not('.dropdown-toggle');
// console.log($navlinks)
$navlinks.click((e) => {
$(e.target).closest('.navbar').find('.navbar-collapse').collapse('toggle')
})
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.css">
<div data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container">
<div class="row">
<nav class="navbar fixed-top navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="./img/logo.png" alt="logo">
</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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutMe">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#projectsList">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="!#" target="_blank">Server - Info</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="!#" target="_blank">Cloud - Server</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

BS4 Dropdown malfunction on mobile

I have a dropdown menu on my site that works on my computer but on mobile, the moment you open the dropdown menu the main menu closes... the site is currently live on https://www.devtechprojects.co.za.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<header id="main-header" class="header-fancy">
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img class="img-fluid" src="https://via.placeholder.com/50" alt="#">
</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="ion-navicon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto justify-content-end">
<li class="nav-item">
<a class="nav-link " href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Services
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="webdev.php">Web Development</a>
<a class="dropdown-item" href="internet.php">Internet Services</a>
<a class="dropdown-item" href="designing.php">Designing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
<ul class="info-share">
<li><i class="fa fa-phone"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

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>

Categories