During my journey of learning responsive design, I encountered an issue where the hamburger and cart icon appeared below my hamburger menu instead of the top-right corner. I am unable to pinpoint the problem within my code.
To provide better clarity, I have attached an error image: error-image
The expected layout should have both the hamburger icon and cart icon positioned in the top-right corner as depicted in the shared image.
This is the code snippet in question:
<div className="navbar">
<a href="#" className="navbar-logo">
Redux Store
</a>
<ul className={`navbar-menu ${menuActive ? "active" : ""}`}>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Shop</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<Link className="cart-icon" to="/cart">
🛒
<div className="cart-quantity">3</div>{" "}
{/* Replace '3' with the actual quantity */}
</Link>
<div
className={`hamburger-menu ${menuActive ? "active" : ""}`}
onClick={() => setMenuActive(!menuActive)}
>
<span></span>
<span></span>
<span></span>
</div>
</div>
css
.navbar {
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
...