locked
bootstrap 4 navbar z-index RRS feed

  • Question

  • User-590375999 posted

    hi,

    how to reduce the fixed-top navbar z-index i have tried to set but no luck

    .navbar{

    z-index: 1

    }

    Thursday, April 5, 2018 1:56 AM

All replies

  • User61956409 posted

    Hi sivapooja,

    reduce the fixed-top navbar z-index

    I do a test with the following sample code, I find specifying z-index for fixed navigation bar works for me.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .navbar{
                z-index:1;
            }
        </style>
    </head>
    <body style="height:1500px">
    
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">WebSiteName</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </div>
        </nav>
    
        <div style=";top:0;z-index:2;background-color:azure;font-size:xx-large">hello</div>
    
        <div class="container" style="margin-top:50px">
            <h3>Fixed Navbar</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
                    <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
                </div>
                <div class="col-md-4">
                    <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
                    <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
                </div>
                <div class="col-md-4">
                    <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
                    <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
                </div>
            </div>
        </div>
    
        <h1>Scroll this page to see the effect</h1>
    
    </body>
    </html>

     Test result:

     

    Comment out z-index:1

     

    Note: please check if your browser supports z-index property.

    With Regards,

    Fei Han

    Friday, April 6, 2018 7:07 AM
  • User-590375999 posted
    Hi,
    I have tried this but doesn't work I am using lateslatest version of chrome browser
    Sunday, April 8, 2018 5:26 AM
  • User61956409 posted

    Hi sivapooja,

    Firstly, please use F12 developer tools to check if the z-index property value that you specify are overrode.

    Besides, if you could share the code that you are using, I will help find and solve the problem.

    With Regards,

    Fei Han

    Thursday, April 12, 2018 3:15 AM
  • User-1552526428 posted

    Please move your Style into the div element to achieve your desired outcome like below.

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark " style="z-index:100;">

    Saturday, August 10, 2019 12:59 PM
  • User-474980206 posted

    you also need to understand z-index stacking rules. 

       https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

    changing the z-index will have no effect, if the two contents are in different stacks.

    Monday, August 12, 2019 3:50 PM