I'm facing an issue with my image carousel using Flickity where the dropdown menu is getting hidden behind it. I have attempted to adjust the z-index property, but even with !important added, it doesn't seem to resolve the problem. I've been concentrating on modifying the nav CSS to fix it, but perhaps I should be looking into adjusting the Flickity CSS instead?
Below is a snippet of my HTML structure:
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="#!"><img src="img/LOGO.WELK.png" alt=""></a>
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
// Navigation links here
</ul>
</nav>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="wrapper">
<div class="gallery">
// Gallery items displayed here
</div>
</div>
</section>
Here is a snippet of my custom CSS:
.navigation {
// Styling for navigation section
}
.brand {
// Branding styles
}
.nav-container {
// Navbar container properties
}
// Remaining CSS code
If needed, my Flickity CSS can be found in a separate folder.