Multiple fixed-top nav bars using Bootstrap 4 in ASP.Net

RichardSa
 
on Jul 13, 2021 02:18 AM
Sample_198634.zip
756 Views

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">&nbsp;&nbsp;&nbsp;&nbsp;<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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 13, 2021 06:30 AM

Hi RichardSa,

Use below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <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;
        }

        .fixed-top-2 {
            margin-top: 56px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <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">&nbsp;&nbsp;&nbsp;&nbsp;<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 fixed-top-2">
                <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>
    </form>
</body>
</html>