I've been experimenting with my bootstrap navigation bar. Originally set to "fixed" position, I changed it to absolute and now a horizontal scrollbar is appearing. Any ideas on how to prevent this scrollbar from showing up? Thank you!
So far, I've tried using "overflow-x: auto;" and "white-space: nowrap;" in the nav ID to avoid the horizontal scrollbar without success.
#nav {
height: 100px;
display: block;
position: absolute;
top: 0;
width: 100%;
transition: all ease .5s;
z-index: 9999;
overflow-x: auto;
white-space: nowrap;
}
#logo {
height: 45px;
transition: all ease .5s;
margin-top: 15px;
margin-left: 50px;
}
#nav a {
transition: all ease .5s;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: white;
}
.navbar-default .navbar-nav > li > a {
margin-right: 50px;
margin-top: 30px;
font-size: 18px;
font-weight: bolder;
} <div class="navbar navbar-default" id = "nav">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="img/logo.png" id="logo" alt="Logo Motive Digital"/></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="about.html" class="effect-underline">ABOUT</a></li>
<li><a href="serivces.html" class="effect-underline">SERVICES</a></li>
<li><a href="work.html" class="effect-underline">WORK</a></li>
<li><a href="contact.html" class="effect-underline">CONTACT</a></li>
</ul>
</div>