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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
<body>
<header>
<nav class="menu-container">
<div class="menu" id="navbar">
<ul class="left-side nav-links">
<li>
<img src="iconsproducts-icon.svg" alt="product icon" class="icons" />
<a href="#" target="_blank">Products</a>
</li>
<li>
<img src="iconsshopping-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="imageslogo.png" width="144" alt="Logo" class="logo" />
</div>
<ul class="right-side nav-links">
<li>
<img src="iconsservice-locator.svg" alt="search icon" class="icons" />
<a href="#" target="_blank">Service Locator</a>
</li>
<li>
<img src="iconscontact-icon.svg" alt="phone icon" class="icons" />
<a href="#" target="_blank">Contact</a>
</li>
</ul>
</div>
<button class="btn-toggle">
<img src="iconsmobile-toggle.svg">
</button>
</nav>
</header>
</body>
</html>
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: #2C4149;
}
/* 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;
}
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
New contributor
Marketingn3rd is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.