luka gab luka gab - 6 months ago 32
jQuery Question

bootstrap navbar and screen phone optimisation

So basically the problem is the bootstrap navbar works fine when the screen size is large but once you make the screen smaller to that of a mobile phone and you click the collapse button the background of the menu is mixed up with initial background.

Keep in mind that navbar background is transparent and then change when scrolling. the problem is in a small device and navbar on the top of the page the background of menu is mixed.

HTML:

<nav class="navbar navbar-default navbar-fixed-top" id="custom-nav">
<div class="container">
<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="#">MyWebsite</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#jumbotron">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#footer">Download</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>



</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

</header>


JAVASCRIPT

$('.carousel').carousel({
interval: 3000
})
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$('#custom-nav').addClass('affix');
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$('#custom-nav').removeClass('affix');
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});


CSS

.navbar-nav {
color:#fff;
}
@media screen and (min-width: 768px){
CSS
}
#custom-nav {
background-color: rgba(0,0,0,0);
border: 0;
box-shadow: none;
z-index: 999;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: background .5s ease-in-out, opacity .5s ease;
-moz-transition: background .5s ease-in-out, opacity .5s ease;
transition: background .5s ease-in-out, opacity .5s ease;
}
#custom-nav .container {
padding-top: 0px;
padding-bottom: 0px;
-webkit-transition: padding-top .5s ease, padding-bottom .5s ease;
-moz-transition: padding-top .5s ease, padding-bottom .5s ease;
transition: padding-top .5s ease, padding-top .5s ease, padding-bottom .5s ease;
}
#custom-nav.affix {
top: 0;
min-width: 100%;
background-color: #f8f8f8;
opacity: 0.9;
-webkit-transition: background .5s ease-in-out, opacity .5s ease;
-moz-transition: background .5s ease-in-out, opacity .5s ease;
transition: background .5s ease-in-out, opacity .5s ease;
}
#custom-nav a{
color:black;
}
@media screen and (max-width: 767px){
#wrapwrap {
padding-top: 50px;
}
.navbar-fixed-top {
z-index: 999;
}
#custom-nav .navbar-header{
background-color: #f8f8f8;
float: none;
}
}


any help would be much appreciated

Answer

Remove the current background-color property from your #custom-nav (leave the rest of the custom-nav properties as they are) and add this to your css:

@media (min-width: 768px) {
    #custom-nav {
        background-color: rgba(0,0,0,0);
    }
}

Link to jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/111/