Bootstrap Navbar Dropdown Not Working in Browser, Codepen okay - javascript

I have a document with a navbar whose dropdown menu just won't work. It works in my codepen, but not through my text-editor(Sublime). I have searched all over for a solution, so here I am.
I have tried:
-Bootstrap Docs
-Making sure jQuery script is before Boostrap script
-Triple checking my closures
-Lots of searching Google and StackOverflow.
-Adding this code:
<script>
$("document").ready(function() {
$(".dropdown").dropdown();
});
</script>
Here's what I believe to be the relevant code. Any insights to my mistake will be greatly appreciated.
<!DOCTYPE html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>JakobiArtWorks</title>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel = "stylesheet">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel = "stylesheet">
<link href = "https://fonts.googleapis.com/css?family=Russo+One" rel = "stylesheet">
<link href = "style.css" rel = "stylesheet">
</head>
<body>
<header>
<!--nav-->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id = "top">
<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 class="navbar-brand" href="#">JAW</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 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#art">Art</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#wire">Wire</a>
<a class="dropdown-item" href="#clay">Clay</a>
<a class="dropdown-item" href="#plywood">Plywood</a>
<a class = "dropdown-item" href = "#concrete">Concrete</a>
</div>
</li>
</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>
<!--end nav-->
</header>
...
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src = "script.js"></script>
</body>
</html>


The problem is that you use two different versions of bootstrap of bootstrap. In your header you use the CSS of Bootstrap 4.0.0-alpha.6 and on the end of your body you have the JavaScript of version 3.3.7. You can either use one or the other but not both together.
This code works for me:
<!DOCTYPE html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>JakobiArtWorks</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<!--nav-->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="top">
<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 class="navbar-brand" href="#">JAW</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 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#art">Art</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#wire">Wire</a>
<a class="dropdown-item" href="#clay">Clay</a>
<a class="dropdown-item" href="#plywood">Plywood</a>
<a class="dropdown-item" href="#concrete">Concrete</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>
<!--end nav-->
</header>
...
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="script.js"></script>
</body>
</html>


well you have extra </li> after <a class = "dropdown-item" href = "#concrete">Concrete</a> reomove it. and in your script dropdown-toggle should be pointed
WRONG
$("document").ready(function() {
$(".dropdown").dropdown();
});
remove "" in document and .dropdown it should be written like this
CORRECT
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
Demo With your code

Related

Dropdown not worked on bootstrap 5.3

I trying to create navigation bar with bootstrap.
I read the docs from here, but my drop down not working.
I attached everything in the <head> <head/> section but dropdown not worked for me.
This is my code:
<!DOCTYPE html>
<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>НИМХ - АС и БД, Филиал - Пловдив</title>
<!-- index.css -->
<link rel="stylesheet" href="./css/index.css">
<!-- CSS Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- JS Leaflet -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<!-- CSS Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- JS Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<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" role="search">
<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>
<div id="map">
<!-- Load map -->
<script src="./js/leaflet.js"></script>
</div>
</body>
</html>
Can I get example with worked dropdown on bootstrap 5.3 ?
I think I have attached all the necessary libraries for the dropdown menu to work ?

You have to add Bootstrap's JavaScript as well:
// Add this line before the closing </body> tag
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
i.e.
<div id="map">
<!-- Load map -->
<script src="./js/leaflet.js"></script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

You have included BOOTSTRAP twice!
delete this row from your head tag
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
Working example without it: https://jsfiddle.net/MarinHTML/8kscdbn9/11/
------EDIT----- depricated old answer: ---
you're gonna need some JS to do the job here, because what you did is NEST a dropdown into another dropdown. Not sure if possible by simple bootstrap means. You can, but it must be on hover, and I presume you don't want that.
Here is a quick example of what I think you want:
https://jsfiddle.net/MarinHTML/t7zmqcd9/
And here is the JS to use it:
let dds = document.querySelectorAll('.dropdown-toggle')
dds.forEach((dd)=>{
dd.addEventListener('click', function (e) {
var el = this.nextElementSibling
el.style.display = el.style.display==='block'?'none':'block'
})
})

Bootstrap provides you with several stackblitz links to check their templates, like this: https://stackblitz.com/run?file=index.html
Used on your code would be something like this:
<!DOCTYPE html>
<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>НИМХ - АС и БД, Филиал - Пловдив</title>
<!-- index.css -->
<link rel="stylesheet" href="./css/index.css">
<!-- CSS Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- JS Leaflet -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<!-- CSS Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- JS Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<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" role="search">
<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>
<div id="map">
<script src="./js/leaflet.js"></script>
</div>
<!--here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"> </script>
<!-- here -->
</body>
</html>
So all that you are missing is the:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
before the body close tag

I want to show google custom search results in another page and under a different div

I want to integrate google's custom search engine into my website. I put the search box to navbar in my index.html page so GCSE shows results in the navbar section unpleasantly but I want to show search results in search-page.html and under arkaplan div. How can I do this? Is there any javascript code for this situation? Also, I used the form get method and I couldn't take any results.
My index.html is like this
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<title>Example Page</title>
</head>
<body>
<div class="container">
<div class="ct-content">
<div class="header-img">
<img src="img/header-cloud.jpg" alt="header">
<h1 class="header-yazi">Example Page</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">examplepage.com</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav text-center ">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Ana Sayfa</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Rüyalar
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Home Page</a></li>
<li><a class="dropdown-item" href="#">Google</a></li>
<li><a class="dropdown-item" href="#">Custom</a></li>
<li><a class="dropdown-item" href="#">Search</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example 4</a>
</li>
<li class="nav-item">
<a class="nav-link yesil" href="/search-page.html">Search Page</a>
</li>
</ul>
<form>
<script async src="https://cse.google.com/cse.js?cx=1234567890"></script>
<div class="gcse-search"></div>
</form>
</div>
</div>
</div>
</nav>
My search-page.html is like this
<!DOCTYPE html>
<html lang="en">
<head>
<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://kit.fontawesome.com/149bed2a73.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<title>Example Page</title>
</head>
<body>
<div class="container">
<div class="header-img">
<img src="img/header-cloud.jpg" alt="header">
<h1 class="header-yazi">Example Page</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">examplepage.com</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav text-center ">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="/index.html">Home Page</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Example 1
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Example 2</a></li>
<li><a class="dropdown-item" href="#">Example 3</a></li>
<li><a class="dropdown-item" href="#">Example 4</a></li>
<li><a class="dropdown-item" href="#">Example 5</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example 7/a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Example9</a>
</li>
<li class="nav-item">
<a class="nav-link yesil" href="/search-page.html">SearchPage</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="arkaplan yukseklik">
I want to show search results in here
</div>
<div class="footer">
<span>Copyright © 2022</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
</body>
</html>

I finally found a solution for my question from a source. Firstly i want to share my updated index.html: Important code is under the </nav> tag and above the </body> tag. I put the searchbar under the navbar.
<!DOCTYPE html>
<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">
<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>
<title>Example Website</title>
</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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Google</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Custom</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Search</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="/search.js" async defer></script>
<gcse:searchbox-only resultsUrl="/search-page.html"></gcse:searchbox-only>
</body>
</html>
Secondly i want to share search-page.html . You should redirect your results another page. Important code is again under the </nav> tag and above the </body> tag in form element
<!DOCTYPE html>
<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">
<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>
<title>Example Website</title>
</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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Google</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Custom</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Search</a>
</li>
</ul>
</div>
</div>
</nav>
<form>
<script async src="https://cse.google.com/cse.js?cx=1234567890"></script>
<div class="gcse-search"></div>
</form>
</body>
</html>
Finally you need a javascript code . I used it externally if you want you can use internally. For internal js code you can use script type="module" for deferring. You should enter your google custom search code in front of var cx = . Js code should be in the index.html between </nav> and </body> tags. I wrote it as search.js
(function () {
var cx = '1234567890';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
You can see original page in this link: Source

My toggle navbar is not working. Can someone help me?

my toggle navbar is not working, can anyone tell me why and how to fix it? I looked at it online but Im still not sure what is the issue in mine.
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><style>
<title>homepage</title>
</head>
<body>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<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="/sentiment/type">Input Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sentiment/import">Import Tweets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/feedback">Feedback</a>
</li>
</ul>
</div>
<span class="hello-msg"><strong>Hello, {{request.user}}</strong></span>
<button class="btn btn-danger navbar-btn" ><h7 class="white-text" color=white;>Logout</h7></button>
</nav>
<!-- END nav -->
<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>
</body>
</html>
Im using navbar from here: https://getbootstrap.com/docs/4.0/components/navbar/

Your syntax is wrong. You have a double body label and double head label.

you have some syntax errors, just simply copy this and replace it with your code:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>homepage</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<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="/sentiment/type">Input Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sentiment/import">Import Tweets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/feedback">Feedback</a>
</li>
</ul>
</div>
<span class="hello-msg"><strong>Hello, {{request.user}}</strong></span>
<button class="btn btn-danger navbar-btn" ><h7 class="white-text" color=white;>Logout</h7></button>
</nav>
<!-- END nav -->
<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>
</body>
</html>

Bootstrap toggle button is not working on mobile screen?

I am using Bootstrap but don't know why the toggle button is not working I have searched it on the internet but didn't get the right answer there are many similar questions on the StackOverflow but they are not also solving me problem Like Bootstrap toggle button is not working and bootstrap navbar toggle button is not working
So please can anyone tell me why it is happening.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>TutorInet</title>
</head>
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container-fluid">
<a style="font-weight: 500;">
<h3 style="color:#4A4A4A;text-transform: uppercase;margin-top:8px;"> Tutor<span
style="color:#F97C44;">I</span>net</h3>
</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="navbarNav">
<ul class="navbar-nav">
<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="https://www.tutorinet.com/blog.php">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.tutorinet.com/contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li style="color:#1EB909;font-weight: 600;" class="nav-item">
<a style="color:#1EB909;font-weight: 600;" class="nav-link" href="https://www.tutorinet.com/login.php">Log
in</a>
</li>
<button style="color:white;background: #1EB909;border: none;" type="button" class="btn btn-primary"><a
style="color:white;background: #1EB909;" href="https://www.tutorinet.com/signup.php?type=1">Sign
Up</a></button>
</ul>
</div>
</div>
</nav>

You need to remove the bootstrap script you have and include bootstrap.bundle.min.js
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
also the id value in your div should be the same with data-bs-target value in your button
<div class="collapse navbar-collapse" id="navbarSupportedContent">

Jquery Scroll not firing when using

So when I scroll down the page it will not work at all when I am using bootstrap it just doesn't work but when I use website with just that js and html & css no <head> tags or anything it will work. My code is below.
I don't know what I can do to fix this. I've tried for about 3 hours trying to make it work but no matter what I do it wont work even if I remove the addclass and remove class and put a console.log it wont even work. My friend uses the same js for his website and it works but I dont know what it is on my website that makes it different. We use the same jquery version.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
<link rel="icon" href="#" type="image/png">
<title>PrismPanel | Home</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<link rel="stylesheet" href="./static/css/style.css?v=0.1">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="navbar">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<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 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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<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>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() !== 0) {
$('.navbar').addClass('scrolled');
} else {
$('.navbar').removeClass('scrolled');
}
});
});
</script>
</body>
</html>

Does that work for you? I just replaced bootstrap.css source.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
https://jsfiddle.net/z4e73gs8/
Because in this fiddle that works.
Maybe something wrong is with your bootstrap.css file?

Categories