NavBar is Fixed Section heading is not soing-CodePudding

=================================

my page is like home page on web [1]: https://i.stack.imgur.com/MIN8V.png problem is on click link new: [this is my problem][1]I need page like this when click on new:[2]: https://i.stack.imgur.com/QeB1Z.png [My navbar is fixed][2] when I am click on new my section heading is covered by navbar [1]: https://i.stack.imgur.com/tpNEi.png In This page navbar is fixed. when I am click on new my section heading is not display. heading is covered by navbar please help I need code like this when we click on new

**only use HTML, CSS and JavaScript**

code is:

**CSS of Code**
    ```* {
        margin: 0;
        padding: 0;
    }

    .nav {
        width: 100%;
        height: 100px;
        position: fixed;
        background-color: red;
    }

    .section {
        background-color: green;
        height: 200px;
    }

    .section1 {
        background-color: yellow;
        height: 900px;
    }

    .section2 {
        background-color: blue;
        height: 900px;
        transition: .5s;
    }```



**html of Code**

    <div >
        <a href="#main" style="font-size: 3rem;">new</a>

    </div>

    <div>

        <div >

        </div>

        <div >

        </div>

        <div  id="main">
            <h1>section</h1>
        </div>

    </div>


    <script>
    </script>
</body>

</html>```

CodePudding user response：

First you should always use min-heights so that they can expand on mobile.

Then you could give a padding-top: 150px to the id so that it displays below the nav and set the scroll behaviour in css

html{
scroll-behaviour:smooth;
}

CodePudding user response：

Or copy this. It is with a container. You will see if you see the preview.

<html>
<head>
<style>
            * {
        margin: 0;
        padding: 0;
    }
    html{
        scroll-behavior: smooth;
    }

    .nav {
        width: 100%;
        height: 100px;
        position: fixed;
        background-color: red;
    }

    .section1 {
        background-color: green;
        min-height: 200px;
    }

    .section2 {
        background-color: yellow;
        min-height: 900px;
    }

    .section3 {
        background-color: green;
        min-height: 900px;
        transition: .5s;
        padding-top: 150px;
    }
    .container{
        height: 100%;
        background-color: blue;
    }
</style>
</head>
<body>
        <div >
            <a href="#main" style="font-size: 3rem;">new</a>
        </div>
    
        <div>
            <div >
    
            </div>
    
            <div >
    
            </div>
    
            <div  id="main">
                <div >
                    <h1>section</h1>
                </div>
            </div>
    
        </div>
</body>
</html>

CodePudding user response：

Copy this

    <html>
<head>
<style>
            * {
        margin: 0;
        padding: 0;
    }
    html{
        scroll-behavior: smooth;
    }

    .nav {
        width: 100%;
        height: 100px;
        position: fixed;
        background-color: red;
    }

    .section1 {
        background-color: green;
        min-height: 200px;
    }

    .section2 {
        background-color: yellow;
        min-height: 900px;
    }

    .section3 {
        background-color: blue;
        min-height: 900px;
        transition: .5s;
        padding-top: 150px;
    }
</style>
</head>
<body>
        <div >
            <a href="#main" style="font-size: 3rem;">new</a>
        </div>
    
        <div>
            <div >
    
            </div>
    
            <div >
    
            </div>
    
            <div  id="main">
                <h1>section</h1>
            </div>
    
        </div>
</body>
</html>