I'm encountering an issue with my navbar responsiveness as it overflows at smaller screen sizes (sm/xs).
https://i.sstatic.net/AgXJO.png
Although I used the code from the Bootstrap website, I have made some modifications. Could these changes be causing the problem?
Update: including HTML along with CSS
.navbar{
height: 10.0rem;
border-bottom: 1px solid rgb(168, 168, 168);
}
.bg-light {
background-color: white !important;
}
.navbar-collapse{
padding-left: 0;
}
#navbarNav{
/* position: relative; */
width: 50%;
padding-left: 60%;
}
#options li{
padding-left: 2rem;
padding-right: 2rem;
font-size: 1.2rem;
font-family: Raleway;
}
li a:hover{
border-bottom: 1px solid black;
}
.navbar-brand{
font-size: 4rem;
padding-left: 3rem;
font-family: Raleway;
font-weight: 400;
}
#header-container {
display: flex;
flex-direction: row;
/* justify-content: space-evenly; */
width: 60%;
height: 8rem;
margin: 0;
} <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Alan Alban</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section id="header-container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" id="options">
<li class="nav-item active">
<a class="nav-link" href="/">Experience <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/skills">Skills</a>
</li>
</ul>
</div>
</section>
</nav>I introduced a section container to see if it would extend the screen's length, however, the navbar still "shrinks" when the screen is resized.