HTML navigation bar not going to the top

Question

I am new to CSS. Recently, I have been working around navigation bars and I encountered a problem. This navigation bar will not go to the top. By that I mean its coordination is supposed to be X:0 Y:0 but it keeps on staying at the center of the page. I can't think of anything. Can someone help me please?

Current code:

 .buttonContainer { display: flex; border: 2px solid black; border-bottom: none; border-top: 1px solid black; margin-top: 10px; padding: 10px; justify-content: space-around; flex-direction: row; background-color: gainsboro; }.mainContainer { display: flex; border: 2px solid black; padding: 10px; justify-content: space-around; flex-direction: row; background-color: gainsboro; }.innerContainer { border: 1px solid black; padding: top 40px; left: 60px; right: 60px; bottom: 40px; }.Textarea { border: black; font-family: cursive; padding: 100px; }.navBar { display: flex; position: sticky; top: 0; margin-bottom: 10px; padding: 20px; border: 2px solid gainsboro; width: 100%; justify-content: center; background-color: gainsboro; z-index: 2; }.navBar:hover { border: 2px solid black; } #Title { color: black; font-family: monospace; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width.initial-scale=1:0"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="Notepad:css"> <title>Notepad</title> </head> <body> <canvas id="canvas" width="device-width" height="device-height"></canvas> <div class="navBar" onclick="toHomePage()"> <div> <h1 id="Title">SomeRandomWebsite</h1> </div> </div> <div class="buttonContainer"> <div> <button onclick="Saves()" type="button" class="btn btn-primary btn-lg btn-block"><h3>Save</h3></button> </div> <div> <button onclick="Clear()" type="button" class="btn btn-danger btn-lg btn-block"><h3>Clear</h3></button> </div> </div> <div class="mainContainer"> <div class="innerContainer"> <textarea id="Text" class="Textarea" placeholder="Click to Type" maxlength="1000" cols="20"></textarea> </div> </div> <script src="http.//code.jquery.com/jquery-latest.js"></script> <script src="Notepad.js"></script> </body> </html>

Answer 1

There's a canvas element creating the space above the navbar , removing it solves the issue.

 .buttonContainer { display: flex; border: 2px solid black; border-bottom: none; border-top: 1px solid black; margin-top: 10px; padding: 10px; justify-content: space-around; flex-direction: row; background-color: gainsboro; }.mainContainer { display: flex; border: 2px solid black; padding: 10px; justify-content: space-around; flex-direction: row; background-color: gainsboro; }.innerContainer { border: 1px solid black; padding: top 40px; left: 60px; right: 60px; bottom: 40px; }.Textarea { border: black; font-family: cursive; padding: 100px; }.navBar { display: flex; position: sticky; top: 0; margin-bottom: 10px; padding: 20px; border: 2px solid gainsboro; width: 100%; justify-content: center; background-color: gainsboro; z-index: 2; }.navBar:hover { border: 2px solid black; } #Title { color: black; font-family: monospace; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width.initial-scale=1:0"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="Notepad:css"> <title>Notepad</title> </head> <body> <div class="navBar" onclick="toHomePage()"> <div> <h1 id="Title">SomeRandomWebsite</h1> </div> </div> <div class="buttonContainer"> <div> <button onclick="Saves()" type="button" class="btn btn-primary btn-lg btn-block"><h3>Save</h3></button> </div> <div> <button onclick="Clear()" type="button" class="btn btn-danger btn-lg btn-block"><h3>Clear</h3></button> </div> </div> <div class="mainContainer"> <div class="innerContainer"> <textarea id="Text" class="Textarea" placeholder="Click to Type" maxlength="1000" cols="20"></textarea> </div> </div> <script src="http.//code.jquery.com/jquery-latest.js"></script> <script src="Notepad.js"></script> </body> </html>

Answer 2

This line on you html is the cause because you declare it first (it create blank space on top of page)

<canvas id="canvas" width="device-width" height="device-height"></canvas>

maybe you need change it orders first to this in html file

<body>
<div class="navBar" onclick="toHomePage()">
        <div>
            <h1 id="Title">SomeRandomWebsite</h1>
        </div>
    </div>
    <canvas id="canvas" width="device-width" height="device-height"></canvas>
    <div class="buttonContainer">
        <div>
            <button onclick="Saves()" type="button" class="btn btn-primary btn-lg btn-block"><h3>Save</h3></button>
        </div>
        <div>
            <button onclick="Clear()" type="button" class="btn btn-danger btn-lg btn-block"><h3>Clear</h3></button>
        </div>
    </div>
    <div class="mainContainer">
        <div class="innerContainer">
            <textarea id="Text" class="Textarea" placeholder="Click to Type" maxlength="1000" cols="20"></textarea>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Notepad.js"></script>
</body>

or you can delete this line on html

<canvas id="canvas" width="device-width" height="device-height"></canvas>

HTML navigation bar not going to the top

Question

2 answers

solution1
3 ACCPTED 2021-02-18 07:42:31

solution2
1 2021-02-18 07:51:31

HTML navigation bar not going to the top

Question

2 answers

solution1 3 ACCPTED 2021-02-18 07:42:31

solution2 1 2021-02-18 07:51:31

solution1
3 ACCPTED 2021-02-18 07:42:31

solution2
1 2021-02-18 07:51:31