I have two navbars at the top of my web form.
I tried to fix their positions by setting the CSS style position to "fixed.
But the navbar that is below covered the navbar that is top.
Please how do I fix this? I want the two navbars to be fixed at the top of the page. I don't want one navbar to cover the other.
Thank you.
Here is HTML
<div class="wrapper">
<nav class="navbar navbar-expand-lg fixed-top" id="top-nav" style=" background-color: #C0C0C0;font-size: 10pt;min-height: 40px;">
<span class="top-content"> <i class="fa fa-phone" aria-hidden="true" style="margin: 0 7px 0 0"></i><a href="back.aspx"><label runat="server" style="cursor: pointer; color: #081139;">+234-812-8709-222</label></a>
<i class="fa fa-envelope" aria-hidden="true" style="margin: 0 7px"></i><a href="gmail.com">
<label runat="server" style="cursor: pointer; color: #081139;">newproject@gmail.com</label></a>
</span>
</nav>
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href="Index.aspx" style="font-weight:800;font-size:18pt;">SuperLife Store</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-color: #fff; border-width: 1px; background-color: transparent;color: #fff;">
<span class=""><i class="fa fa-bars" aria-hidden="true" style="color:#fff;"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="Index.aspx"><i class="fa fa-home" aria-hidden="true" style="margin: 0 7px"></i>Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Superlifegallery.aspx"><i class="fa fa-envira" aria-hidden="true" style="margin: 0 7px"></i>SuperLife Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="biz.aspx"><i class="fa fa-bar-chart" aria-hidden="true" style="margin: 0 7px"></i>SuperLife Business</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.aspx"><i class="fa fa-address-book" aria-hidden="true" style="margin: 0 7px"></i>Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="root.aspx"><i class="fa fa-coffee" aria-hidden="true" style="margin: 0 7px"></i>Root Coffee</a>
</li>
</ul>
<div class="form-inline">
<asp:TextBox ID="TextBoxsearch" runat="server" CssClass="form-control" Font-Size="10pt" placeholder="Type your Search Here" />
<asp:Button ID="btnsrch" runat="server" class="btnsrch" CssClass="btn btn-primary" Text="Search" />
</div>
</div>
</nav>
</div>
CSS
<style type="text/css">
.wrapper{
font-family: Nunito;
background-repeat: no-repeat;
height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
.navbar-nav {
margin-left: auto;
}
.navbar {
background-color: #0a6879;
}
.nav-link{
color: #fff;
}
.navbar-nav .active {
color: #87CEEB;
}
.nav-link:hover{color:steelblue;}
.navbar-brand:hover{color:steelblue;}
.navbar-brand{
color: #fff;
}
</style>
