Problem in positioning in navigation bar using css

تبليغ
سؤال

يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.

تبليغ
‎إلغاء

I am making a navbar of an e-commerce website and I want this little line to display like it is displayed below “Home”, when the user is in that particular page.

When I write the code, this happens-

For some reason, that little bar, starts just after that Nav button ends.

body {
font-family: ‘Montserrat’, sans-serif;
width: 100%;
margin: 0;
background-color: #121212;
}

#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #121212;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

#navbar {
display: flex;
align-items: center;
justify-content: space-between;
}

#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}

#navbar li a {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}

#navbar li a:hover,
#navbar li a.active {
color: #e50914;
}

#navbar li a.active::after {
content: “”;
width: 60%;
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
position: 0;
}

.logo {
width: 10rem;
}
<body>
<section id=”header”>
<a href=”#”><img src=”images/logo.png” class=”logo”></a>
<div>
<ul id=”navbar”>
<li><a class=”active” href=”why.html”>Why Snap Smile</a></li>
<li><a href=”solutions.html”>Solutions</a></li>
<li><a href=”pricing.html”>Pricing</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”gallery.html”>Gallery</a></li>
<li><a href=””><i class=”fa-solid fa-headset”></i></a></li>
</ul>
</div>
</section>
</body>

0
X 4 أشهر 2022-07-10T12:04:16+03:00 0 إجابة 2 مشاهدات مبتدئ 0

‫أضف إجابة

تصفح
تصفح

مجهول يجيب