htmlcsspositionnavbarfixed

How to have a fixed navbar and the content is below it

I have a Fixed navbar:

    .navbar
{
    display: inline-block;
    background-color: #2327fc;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    z-index:1;
    width: 100%;
    position:fixed; 
}

.navObject
{
    display: block;
    padding:1vh;
}

.navLink
{
    display:block;
    background-color: #79aada;
    padding:0.55vh;
    border-style: solid;
    border-color: #7c9ff9;
    color:#ffffff;
    font-weight: bold;
    text-align:center;
    text-decoration: none;
    font-size: 3vh 3vw;
}

I want the div to be below the navbar. Is there a way to do this without guessing the margin needed.

     <!DOCTYPE html>
        <html>
            <body>
                <article>
                    <div>
                        <ul class ='navbar'>

                        <li class = 'navObject'><a href="(a link)" class="navLink" >Link 1</a></li>
                        <li class = 'navObject'><a href="(a link)" class="navLink" >Link 2</a></li>
                        <li class = 'navObject'><a href="(a link)" class="navLink" >Link 3</a></li>

                         .... more navbar content       
                        </ul>
                    </div>
                    <div>
                        ...below content
                    </div>
    ..closing tags

Currenly the content in the below div is being shown from the top of the html page and the navbar is covering some of this content.

I want the content to be below the navbar. (But also fixed - i understand putting it fixed takes it out of the flow, but is there a workaround?)

Thanks

Solution

  • Use position: sticky; top: 0; instead of fixed.