I'm new here, but I wasn't able to find an answer to this using just html, css, and js. This is my first expedition outside Wordpress. I've been stuck for 3 days and I'm missing something. I don't have anyone to reach out to get another set of eyes on it, so I figured I'd try my luck here. The desktop version works, it's the mobile responsive that's not working for me. I debated creating a separate navbar for mobile only, but figured there's probably a way to do this without that.
The header is transparent until hover (got that)It's sticky and transforms to another color on scroll (got that)The responsive part is killing me though, I lose the centered logo and can't get the button to open a dropdown menu. Any help is appreciated.
header { display: flex; flex-direction: row; justify-content: center; font-weight: 600; height: 78px; width: 100%; background-color: transparent; position: sticky; transition: background-color 0.3s; z-index: 10; top: 0;}/* BLUE HEADER BACKGROUND ON HOVER */header:hover { background-color: #7B97A6;}/* START HEADER BACKGROUND TRANSITION ON SCROLL */header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #7B97A6 0%, #2C4149 50%); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.3s; z-index: -1;}.header-scrolled::before { opacity: 1;}.menu { display: flex; flex-direction: row; height: 100%; align-items: center; justify-content: space-evenly; font-size: 1.8rem; width: 100%; height: 100%; column-gap: 7vw;}.menu a { color: #fff; font-weight: 600; text-decoration: none; letter-spacing: 0.1rem;}.menu a:hover { color: #cf0a2c; transition-duration: 0.6s;}.btn-toggle,.menu-container .links { display: none;}.nav-logo { display: block; width: 144px; margin: 0 auto; float: none;}.logo { width: 100%; height: auto;}.icons { height: 20px; margin-right: 2px; align-items: center; vertical-align: middle;}.menu ul { display: flex; flex-direction: row; list-style: none; text-transform: uppercase; column-gap: 6vw;}<header><nav class="menu-container"><div class="menu" id="navbar"><ul class="left-side nav-links"><li><img src="icons\products-icon.svg" alt="product icon" class="icons" /><a href="#" target="_blank">Products</a></li><li><img src="icons\shopping-cart.svg" alt="shopping cart icon" class="icons" /><a href="#" target="_blank">Order-now</a></li></ul><div class="nav-logo" id="nav-logo"><img src="images\logo.png" width="144" alt="Logo" class="logo" /></div><ul class="right-side nav-links"><li><img src="icons\service-locator.svg" alt="search icon" class="icons" /><a href="#" target="_blank">Service Locator</a></li><li><img src="icons\contact-icon.svg" alt="phone icon" class="icons" /><a href="#" target="_blank">Contact</a></li></ul></div><button class="btn-toggle"><img src="icons\mobile-toggle.svg"></button></nav></header>Here's an image of the desktop version centered logo desktop menu.
This is the mobile responsive look I'm going for.responsive mobile dropdown nav