When page loads, the background color of my navigation is transparent and when the page is scrolled background color of the navigation bar changes to the set color; its working fine on desktop view but when I minimize the window to mobile view, background color of the navigation bar remains transparent too BUT when I click the toggle button to open the navigation List items it still remains transparent, making it impossible to see the List Items.
Please how can I make the background color of navigation bar in mobile view to also be transparent on page load and when the toggle button is clicked, the background color of the nav bar changes?
Just as it is obtain in desktop view.
Here is my Javascript, CSS and HTML
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background', '#32657c');
$('.nav-link').css('color', '#eeeeee');
$('.navbar-brand').css('color', '#eeeeee');
$('#newclients').css('color', '#eeeeee');
$('#newclients').css('border-color', '#eeeeee');
$('#newclients').css('background', '#32657c');
} else {
$('.navbar').css('background', 'transparent');
$('.nav-link').css('color', '#011B33');
$('.navbar-brand').css('color', '#011B33');
$('#newclients').css('border-color', '#32657c');
$('#newclients').css('color', '#011B33');
$('#newclients').css('background', 'transparent');
}
});
</script> <style type="text/css">
.wrapper {
background-repeat: no-repeat;
height: 1000px;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
.top {
height: 100%;
background-size: cover;
background-color: rgb(245, 245, 245);
width: 100%;
z-index: 100;
}
.navbar-nav {
margin-left: auto;
}
#navbarNav li a {
color: #eeeeee;
font-family: 'Be Vietnam', sans-serif;
font-size: 11pt;
font-weight: bolder;
}
.nav-item {
float: right;
}
.navbar-nav .active {
color: #eeeeee;
}
#navbarNav li a::after:hover {
color: #eeeeee;
}
.navbar-brand:hover {
color: #eeeeee;
}
@media(min-width:992px) {
.col-md-6:not(:first-child) {
}
.col-md-6:not(:last-child) {
border-right: 1px solid #200662;
border-left: 1px;
}
.form-horizontal {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top: 0%;
}
}
#btnstart {
border-radius: 5px;
background-color: #32657c;
font-weight: 500;
font-size: 12pt;
}
#btnstart:hover {
color: #eeeeee;
background-color: steelblue;
}
.img-circle {
border-radius: 50%;
float: left;
}
#imgone {
width: 100%;
height: auto;
}
@media screen and (min-width: 360px) and (max-width:640px) {
#imgone {
width: 100%;
height: auto;
}
#boldhead {
font-size: 17pt;
}
}
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
#newclients {
font-family: 'Be Vietnam', sans-serif;
}
@media screen and (min-width: 360px) and (max-width:640px) {
#qr {
display: none;
}
}
</style><div class="wrapper">
<div class="top">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="font-family: Nunito;">
<a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
<i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
<span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
<i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" style="font-weight: bolder;">
<i class="fas fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
<i class="fas fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
<i class="fas fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
</a>
</li>
<li class="nav-item">
<asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
</li>
</ul>
</div>
</nav>
<div>
<img id="dots" alt="dotted" src="images/curly.jpg" />
<div class="line" style="color: #fff;">
</div>
<div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
<div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
<br />
<div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
<label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
<br />
<p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
Start yourshopping for your kids anywhere and anytime!
</p>
<br />
<asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
<br />
<br />
</div>
</div>
<div class="col-sm-4" id="qr" style="margin: 0 auto;">
<div class="container-fluid p-3 mb5 bg-transparent rounded">
<i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
</div>
</div>
</div>
</div>
<br />
<br />
</div>
<div class="back-cont" style="background-color: #eeeeee;">
<div class="container-fluid" style="text-align: center; padding: 30px;">
</div>
<br />
</div>
<div class="contain" style="margin: 0 auto; padding: 10px;">
<br />
</div>
</div>