Bootstrap navbar collapsing upon clicking an option - css

Question

I've been trying to figure this out for a while now but I can't seem to be able to locate the problem. Whenever I click on an option from the navbar, it collapses to mobile size (currently set to 992px in bootstrap so its available on tablets), and then return to original size, which turns out that it has a height of 80px after inspecting it. It used to be fine before, but it has suddenly changed after some code edits. I have included some pictures of the problem below.
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Navigation logo and dropdown icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img src="css/logo-dream.png" id="logo"></img></a>
</div>
<!-- Navigation Options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="nav-appearance">
<li id="main-nav">Home <span class="sr-only">(current)</span></li>
<li id="main-nav">About Us</li>
<li id="main-nav">Services</li>
<li id="main-nav">Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Below is the CSS code I have used:
/* Main navbar design */
.navbar {
border-radius: 0px;
opacity: 0.95;
background-color: #171717;
border-bottom: 1px solid #9494b8;
margin-bottom: 0 !important;
}
.navbar .navbar-nav {
margin: 15px 0;
}
/* Navbar company logo */
.navbar-brand {
padding: 0;
}
#logo {
margin-left: 40px;
width: 171px;
height: 66px;
margin-top: 8px;
}
/* Navbar options */
#nav-appearance {
font-size: 1.7rem;
margin-right: 40px;
font-family: 'Quicksand', sans-serif;
}
#nav-appearance li {
padding-left: 35px;
}
.collapse {
padding: 0;
}
.navbar-collapse {
padding: 0;
}
/* ======= MEDIA QUERIES FOR NAVIGATION AND HOME ======= */
/* Tablets */
#media (max-width: 991px) {
#nav-appearance {
font-size: 1.7rem;
margin-right: 10px;
}
#nav-appearance a {
padding: 0;
}
#nav-appearance li {
padding: 15px 0 15px 0;
width: 80%;
transform: translateX(-50%);
top: 0;
left: 52%;
}
#main-nav {
border-bottom: 1px solid rgba(55, 55, 55, .95);
}
#logo {
content:url("home-icon-tiny.png");
height: 34px;
width: 34px;
margin-left: 13px;
}
}
/* Mobile */
#media (max-width: 767px) {
#logo {
margin-left: 13px;
}
}
Can anyone see any issues? I hope it's an easy fix.

Answer 1

Update:
From the page its clear that one of the JS files is interfering with the navbar elements. By setting some CSS we can remove the height change, please find below the CSS.
Codepen: here
CSS:
.navbar-brand img{
margin-top:7px;
margin-bottom:7px;
}
/* Navbar company logo */
.navbar-brand {
padding: 0;
height:100%;
}
HTML:
<!-- Navigation logo and dropdown icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img src="css/logo-dream.png" id="logo"></img></a>
</div>
<!-- Navigation Options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="nav-appearance">
<li id="main-nav">Home <span class="sr-only">(current)</span></li>
<li id="main-nav">About Us</li>
<li id="main-nav">Services</li>
<li id="main-nav">Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
From the images given I would say that this is a floating elements not having height issue, the solution for this is the clearfix class. so if you change the code as shown below it should not happen. also I removed the div with container-fluid class.
Code: (Do not use)
<!-- Navigation logo and dropdown icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img src="css/logo-dream.png" id="logo"></img></a>
</div>
<!-- Navigation Options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="nav-appearance">
<li id="main-nav">Home <span class="sr-only">(current)</span></li>
<li id="main-nav">About Us</li>
<li id="main-nav">Services</li>
<li id="main-nav">Gallery</li>
<li>Contact</li>
</ul>
</div>