How to make the navbar stay at the top in CSS

Question

I would like some help on how to make my navbar stay at the top in CSS. Technically, I am using Sass, but CSS is compatible with Sass, so anything is fine (as long as it works!).

I know this has already been asked several times, but it is usually with JavaScript or is doesn't answer the question. I have already tried using position:sticky, but maybe I placed it in the wrong tag.

Here is the html code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../../static/css/styles.css">
        <title>Home</title>
    </head>
    <body>
        <div class="navbar">
            <h1>SomeCompany</h1>

            <ul>
                <li><a href="localhost:8000">Home</a></li>
                <li><a href="localhost:8000">About</a></li>
                <li><a href="localhost:8000">Products</a></li>
                <li><a href="localhost:8000">Testimonials</a></li>
                <li><a href="localhost:8000">Contact Us</a></li>
            </ul>
        </div>
    </body>
</html>

Now, here is the CSS code (with me using position:sticky in .navbar):

body {
margin: 0; }

.navbar {
    position: sticky;
    padding: 1em 2em;
    background-color: antiquewhite;

    h1 {
        margin: 0; }

    ul {
        position: relative;
        bottom: 1em;
        float: right;

        li {
            display: inline;
            margin-right: 2em; }
    }
}

Thank you in advance

score 1 · Answer 1 · answered Jun 10 '21 at 11:09

1

I believe what you are trying to do is described here : https://www.w3schools.com/howto/howto_css_fixed_menu.asp

answered Jun 10 '21 at 11:09

Misfits09

176
1
9

score 1 · Answer 2 · answered Jun 10 '21 at 11:12

1

You need to define top: 0px; in your navbar (or whatever value you want) then it should work.

answered Jun 10 '21 at 11:12

Benchy

126
1
4

Thank you for the suggestion Benchy! It is part of the link mentioned by Misfits09. Thank you for the instant response as well. – theProCoder Jun 10 '21 at 11:17

score 1 · Accepted Answer · answered Jun 10 '21 at 11:14

1

You can try adding in css position:absolute; and top:0; to navbar class.

answered Jun 10 '21 at 11:14

Mikołaj Borowski

28
4

How to make the navbar stay at the top in CSS

3 Answers3