how do I add functionality to bootstrap navbar - javascript

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>

Related

bootstrap 5 how to close the whole menu when click on the link or click outside on the page

I'm using BootStrap 5 to build my page
I have a NavBar Menu with links
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent pt-0 pb-0">
<div class="container">
<a class="navbar-brand pt-0 pb-0 me-0" href="#home">Salimi<span>Me</span></a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item position-relative">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#timeline">Education</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<a class="top-btn text-decoration-none d-inline-block" href="#">Download CV</a>
</div>
</div>
</nav>
what i try to do is when the user click on the link i want the whole meu to close and the user get the section he want
also if he click outside the menu the menu close if it's open
How to close the whole NavBar Menu when i click on a link inside or i click outside on the page?

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<style></style>
<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 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>
</ul>
</div>
</div>
</nav>
</body>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
</html>

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>

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>

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.

menu toogle button not working in bootstrap 4

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>

Categories