My website is built using Bootstrap 5, and I am working on creating a navbar dropdown functionality. On desktop, I want the dropdown to open on hover and lead to a new page when clicked. However, on mobile, I only want the dropdown to open and close on click without redirecting the user to a new page. Currently, my dropdown opens on hover and redirects to another page on desktop. On mobile, the dropdown opens on click but does not redirect, and there is an issue with closing the dropdown after opening it. I understand that this issue can be resolved with JavaScript, but I lack knowledge of JavaScript to fix it.
Desired Dropdown Functionality
Desktop/Laptop Dropdown Functionality
- Opens/closes on hover
- Redirects to another page when clicked
Mobile/Tablet Dropdown Functionality
- Opens/closes on click
- Does not redirect to another page
#navbar-color {
background-color: hsl(210, 45%, 30%);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-toggler {
border: 1px solid hsl(0, 0%, 100%);
outline: none;
box-shadow: none;
}
#nav_object {
position: relative;
}
.dropdown:hover .dropdown-menu {
display: block;
background-color: hsl(210, 45%, 30%);
}
.dropdown-item:hover {
background-color: hsl(210, 55%, 41%);
}
#nav_object {
position: relative;
}
@media (min-width: 576px) {
#nav_object::after {
content: '';
opacity: 0;
transition: all 0.2s;
height: 2px;
width: 100%;
background: hsl(18, 100%, 62%);
position: absolute;
bottom: 0;
left: 0;
}
#nav_object:hover::after {
opacity: 1;
}
}
@media screen and (max-width: 576px) {
.dropdown:hover > .dropdown-menu {
display: block;
margin-top: 0;
}
}<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
...
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- NAVIGATION BAR START -->
<nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
<div class="container">
<a href="/index.html">
<img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
</a>
...
...
</script>
</ul>
</div>
<!-- TOGGLE MENU CLOSE -->
</div>
</nav>
<!-- NAVIGATION BAR CLOSE -->
</body>
</html>