When clicking on a navigation item in the dropdown menu, I want to change the background. The issue arises when viewing the menu on screens with a resolution less than 992px, as it becomes difficult to differentiate between the submenus displaying. I need a solution for this problem.
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<!-- bootstrap link -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">
<!-- JQuery3.2.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<!-- Navbar content -->
</nav>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
This is the custom CSS written:
.navbar-collapse .navbar-nav .dropdown .dropdown-menu{
/* CSS styles */
}
/* More styles */
@media only screen and (max-width: 991px) {
/* Styles for screens less than 992px */
}
/* Additional custom styles */
This is the JavaScript file custom.js:
$(document).ready(function(){
$(".dropdown-item").click(function(){
$(this).addClass("customNav");
});
});