Bootstrap menu not expanding
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I have a wordpress site that I am coding using Bootstrap 5 which works for everything except the navbar which does not expand when clicked as a hamburger, tried a few solutions online, changed CDN, class name changes for Bootstrap 5 etc but still not working, not sure if I have bootstrap installed as well as CDN that might be causing an issue as I started this build a long time ago, code below. Appreciate any help anyone can give me.
<!DOCTYPE html>
<html lang=”en”>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
<?php wp_head();?>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>
<link href=”https://unpkg.com/aos@2.3.1/dist/aos.css” rel=”stylesheet”>
</head>
<style>
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 35px;
text-decoration: none;
font-size: 18px;
display: block;
}
.topnav a.icon {
background: #0178c4;
display: block;
position: absolute;
right: 30px;
top: 20px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
text-transform: none !important;
transition: none !important;
transform: none !important;
}
.active {
background-color: #0178c4;
color: white;
}
#myLinks a {
background-color: #0178c4;
}
#myLinks a:hover {
background-color: rgba(1, 120, 196, 0.7) !important;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 18px;
}
#nav-icon3 span:nth-child(4) {
top: 36px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0;
left: 50%;
}
.header-logo {
max-width: 60px;
height: auto;
margin-left: 30px;
}
</style>
<body>
<header class=”site-header”>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”<?php echo home_url();?>” class=”active”><img src=”<?php echo get_theme_file_uri(‘imagesm-no-shadow.png’);?>” class=”header-logo”></a>
<button class=”navbar-toggler” type=”button” data-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 active”>
<a class=”nav-link” href=”<?php echo site_url();?>”>Home <span class=”sr-only”>(current)</span></a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”<?php echo site_url();?>/about-us”>About us</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”<?php echo site_url();?>/services”>Services</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”<?php echo site_url();?>/contact-us”>Contact us</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”<?php echo site_url();?>/portfolio”>Portfolio</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”<?php echo site_url();?>/reviews”>Reviews</a>
</li>
</ul>
</div>
</nav>
</header>
<script>
function myFunction() {
var x = document.getElementById(“myLinks”);
if (x.style.display === “block”) {
x.style.display = “none”;
} else {
x.style.display = “block”;
}
}
</script>
أضف إجابة