I've hit a roadblock with a small issue that I can't seem to resolve.
As a newcomer to bootstrap, I was working on programming the header with navigation when I encountered a problem that has me stumped. I'm reaching out for some assistance from you all.
The issue is as follows: When I resize my window to the point where the menu collapses and the nice 3 bar icon appears, everything works smoothly. However, upon clicking the icon, the menu slides open to the last item, then jumps back up, only displaying a partial amount of menu items. Additionally, a scrollbar appears on the side for navigating through the menu.
Below is my navigation code & style:
<header>
<!-- NAVBAR
===========================================-->
<nav class="navbar-wrapper">
<div class="navbar navbar-collapsed-sm navbar-fixed-top navbar-default" role="navigation">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">navbar<span>brand</span>.nl</a>
</div> <!-- navbar-header -->
<nav class="navbar-collapse navbar-header-collapse collapse">
<ul class="nav navbar-nav navbar-right ">
<li class="active"><a href="/">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> <!-- nav -->
</nav> <!-- navbar collapse -->
</div> <!-- container -->
</div> <!-- navbar -->
</nav> <!-- navbar-wrapper -->
</header> <!-- header -->
Here is the css
.navbar-default .navbar-toggle {
border-color: #FFF !important;
-webkit-border-radius: 2px;
-mox-border-radius: 2px;
border-radius: 2px;
border-width: 2px;
width: 46px;
height: 36px;
background-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
border-color: #f79123 !important;
background-color: #f79123;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
ul.nav {
margin: 21px 0 0 0;
height: 39px;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
}
ul.nav li a {
margin: 0 15px 0 15px;
padding: 0;
display: block;
height: 28px;
background: none;
}
ul.nav li a:hover {
background: none;
}
ul.nav li:last-child a {
margin-right: 9px;
}
ul.nav li.active > a {
border-bottom : 3px solid #f79123;
background: none !important;
}
Looking forward to your help!
-- EDIT --- Here is a screenshot illustrating the problem https://gyazo.com/29fb5cae04dc5e59fdff06d08d4cf574
-- SOLUTION -- After much searching and confusion, it turns out there was an unnecessary height declaration for the UL element in my CSS further down the document. This leftover code from earlier experiments was causing the collapsing menu issue.
Thanks to Shehary for pointing this out.
Appreciate all of your attempts to assist!