I'm currently working on creating a navbar that includes an image logo, title, navigation links, and social links. To achieve this, I've divided the navbar into 4 separate divs. However, I've noticed that when I decrease the screen width using responsive design, a white color appears in the nav bar and expands towards the left as the screen width decreases. Here are some images illustrating the issue:
You can also see the problem in action here: https://i.sstatic.net/xAFJN.png
Here's another visualization of the issue as I decrease the screen width: https://i.sstatic.net/6uFBU.png
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: PollerOne;
src: url('../../fonts/Poller_One/PollerOne-Regular.ttf');
}
/* Styling Navigation Bar */
#navbar {
display: flex;
position: relative;
align-items: center;
height: 65px;
width: 100%;
}
#navbar::before {
content: "";
position: absolute;
background-color: #262626;
height: 65px;
width: 100%;
z-index: -2;
}
.navbar {
color: white;
margin: 7px 7px;
}
/* Styling Logo */
#logo {
background-color: black;
height: 45px;
width: 45px;
min-width: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#logo img {
filter: invert();
width: 25px;
}
/* Styling Title */
#title {
font-family: PollerOne;
min-width: 160.5px;
font-size: 1.4rem;
margin-left: 0px;
}
/* Styling Nav links */
#nav-links {
margin: 0 auto;
}
#nav-links ul {
list-style-type: none;
display: flex;
}
.nav-links {
font-size: 20px;
margin: 0 20px;
/* padding: 5px 10px; */
position: relative;
cursor: pointer;
}
/* Animation Under Nav Links */
.nav-links::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -4px;
background: linear-gradient(white 0 0) center/0% 100% no-repeat;
display: block;
}
:hover.nav-links::after {
animation: pulse 300ms linear;
animation-fill-mode: forwards;
}
@keyframes pulse {
to {
background-size: 100% 100%;
}
}
/* Styling Social Links */
#social-links {
margin-left: auto;
display: flex;
}
.social-links {
width: 30px;
height: 30px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
.social-links img {
width: 27px;
transition: all 200ms ease;
}
.social-links img:hover {
transform: scale(1.5)
}
/* Utility Class */<div id="navbar">
<div id="logo" class="navbar">
<img src="./img/bag.png" alt="">
</div>
<div id="title" class="navbar">Meals Point</div>
<div id="nav-links" class="navbar">
<ul>
<li class="nav-links"><a id="link-1">Home</a></li>
<li class="nav-links"><a id="link-2">About</a></li>
<li class="nav-links"><a id="link-3">Services</a></li>
<li class="nav-links"><a id="link-4">Recipes</a></li>
<li class="nav-links"><a id="link-5">Contact</a></li>
</ul>
</div>
<div id="social-links" class="navbar">
<a class="social-links" href="https://www.twitter.com"><img src="./img/twitter.png" id="link-1"></a>
<a class="social-links" href="https://www.facebook.com"><img src="./img/facebook.png" id="link-2"></a>
<a class="social-links" href="https://www.instagram.com"><img src="./img/instagram.png" id="link-3"></a>
</div>
</div>