Hello everyone, I'm new here and seeking some guidance. Please bear with me if I seem a bit lost or naive. I am attempting to replicate the navigation bar from this website: WOHA. While I don't need it to be an exact replica, I have managed to create a similar hover effect on the secondary navbar by using jQuery onclick function toggle. However, my main challenge now is making the secondary navbar accessible as a dropdown option from the main navbar when the screen size decreases (similar to the example on the linked website). Could someone kindly provide me with instructions on how to achieve this?
$( ".subnav-trigger-about" ).click(function() {
$( "#subnav-about" ).toggle();
});
$( ".subnav-trigger-services" ).click(function() {
$( "#subnav-services" ).toggle();
});#subnav-about {
display: none;
}
#subnav-services {
display: none;
}
.navbar-brand {
color: #FFD700;
opacity: 0.75;
font-size: 2rem;
}
.navbar-brand:hover {
color: #FFD700;
opacity: 1;
}
.nav-item a:hover {
color: #FFD700;
}
@media (min-width: 988px) {
#subnav-about {
position: absolute;
right: 0;
left: 0;
}
#subnav-services {
position: absolute;
right: 0;
left: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e35293529">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706c706c">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">TEST</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 mx-auto mb-2 mb-lg-0 test">
<li class="nav-item">
<a href="#" class="subnav-trigger-about nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link subnav-trigger-services">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PROJECTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- About Us Secondary Nav -->
<nav id="subnav-about" class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">TEST</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EXPERTISE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PEOPLE</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Services Secondary Nav -->
<nav id="subnav-services" class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">CONSULTATION</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MANAGEMENT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TRAINING COURSES</a>
</li>
</ul>
</div>
</div>
</nav>I believe I may need to utilize @media queries in conjunction with the code, but I'm unsure of where to go from there
Edit: I have made some additions to my navbar content since my initial post, although nothing substantial that should have caused any major changes. I'm puzzled as to why the code snippet shared below seems to work for others but not for me. Any assistance in resolving this would be highly appreciated.