We’ve been working on a bootstrap website project and we’ve encountered an issue with the navbar dropdown menu.
The problem is that the dropdown menu opens when the user hovers over it, but for mobile devices, it’s not working smoothly. It keeps closing with a simple touch, which makes navigation difficult.
We want to change it so that the dropdown opens when the user clicks the down arrow and closes when the user clicks the up arrow or the next dropdown. For desktop users, it should still work upon hover. We’ll attach the complete navbar code. Can someone please help us achieve this?
document.addEventListener('DOMContentLoaded', function() {
var toggler = document.querySelector('.navbar-toggler');
toggler.addEventListener('click', function() {
var isExpanded = toggler.getAttribute('aria-expanded') === 'true';
toggler.setAttribute('aria-expanded', !isExpanded);
toggler.querySelector('.navbar-toggler-icon').classList.toggle('navbar-toggler-icon-open');
});
var dropdownToggle = document.querySelector('.dropdown-toggle');
dropdownToggle.addEventListener('click', function(event) {
event.preventDefault();
var dropdownMenu = document.querySelector('.dropdown-menu');
if (dropdownMenu.classList.contains('show')) {
dropdownMenu.classList.remove('show');
dropdownToggle.setAttribute('aria-expanded', 'false');
} else {
dropdownMenu.classList.add('show');
dropdownToggle.setAttribute('aria-expanded', 'true');
}
});
});/* Navbar */
/* Navbar Enhancements */
nav.navbar {
background-color: #ffffff;
padding: 20px 15px;
}
nav.navbar .navbar-nav .nav-link {
color: #555;
padding: 15px;
font-weight: 500;
}
nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link:focus {
background-color: #f0f0f0;
}
/* Dropdown Menu Enhancements */
.nav-item.dropdown .dropdown-menu {
border: none; /* Removes the default border */
background-color: #ffffff; /* Matches the navbar background */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds subtle shadow for depth */
border-radius: 0.25rem; /* Slightly rounded corners for a modern look */
}
.dropdown-item {
color: #555; /* Matches the navbar link color */
padding: 10px 20px; /* Ample padding for easier clicking */
font-weight:500;
transition: background-color 0.3s ease-in-out; /* Smooth transition for hover effect */
}
.dropdown-item:hover, .dropdown-item:focus {
background-color: #f8f8f8; /* Light gray background on hover/focus */
color: #333; /* Slightly darker text color for better contrast */
}
/* Hover effect for dropdown toggles */
.nav-item.dropdown:hover .dropdown-menu {
display: block; /* Shows the dropdown menu on hover */
}
/* Responsive adjustments */
@media (max-width: 992px) {
.navbar-collapse {
background-color: #ffffff; /* Ensures mobile navbar is fully visible */
padding: 10px; /* Padding to match desktop version */
}
.nav-item.dropdown .dropdown-menu {
position: static; /* Prevents positioning issues on mobile */
float: none; /* Ensures dropdowns don't float */
width: 100%; /* Full width dropdowns on mobile for better access */
}
}
/* Handling Divider Style */
.navbar .dropdown-divider {
border-top: 1px solid #eaeaea; /* Light grey divider for separating items */
}
/* Enhance Appearance for Disabled Dropdown Items */
.navbar .dropdown-item.disabled, .navbar .dropdown-item:disabled {
color: #ccc; /* Light grey color for disabled items */
background-color: transparent; /* Clear background for disabled items */
}
/* Enhance Hover and Active Styles for Submenu Items */
.navbar .dropdown-menu .dropdown-menu {
margin-top: 0; /* Aligns submenus closely with their parent menu */
}
.navbar-toggler-icon-open {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox%3D%220 0 30 30%22 xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath stroke%3D%22rgba%280, 0, 0, 0.5%29%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-miterlimit%3D%2210%22 d%3D%22M6 6h18M6 24h18%22/%3E%3C/svg%3E');
}
/* Enhancements for Navbar Dropdown Caret */
.navbar .dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.5em; /* Space before the caret */
vertical-align: 0.25em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
}
/* Custom styling for the up arrow */
.navbar .dropdown-toggle[data-toggle='dropdown'][aria-expanded='true']::after {
border-top: none;
border-bottom: 0.3em solid;
}
/*Navbar End */<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha512-igl8WEUuas9k5dtnhKqyyld6TzzRjvMqLC79jkgT3z02FvJyHAuUtyemm/P/jYSne1xwFI06ezQxEwweaiV7VA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand text-success logo" href="index.php">
<img class="img-fluid" src="img/logo.svg" alt="">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><span class="mdi mdi-home"></span> Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCategories" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownCategories">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTop" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category 2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownTop">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>