How to make a good nav-bar sticky?

Hello all,

I am doing the personal portfolio project for CSS. Right now, I am attempting to replicate the sticky nature of the nav bar. I’ve successfully made it “stick”, but there is a small, visually unpleasing gap where letters
and whatnot can be seen when you scroll down.

Here’s my code:

nav ul{
text-align: right;
font-family: “Open Sans”, sans-serif;
background-color: #0D3D56;
width: 95%;
position: fixed;

}
nav ul li{
display: inline-block;
margin: 90px;
margin-bottom: 20px;
margin-top: 20px;
}

nav ul li a {
color: white;
}

nav ul li a:hover{
color: teal;
}

Forum won’t let me post links yet so I can’t link to project.

How do you make the nav bar stick to the top of the page?

Thanks.

It looks like your nav bar has margin-bottom: 10em; which is likely causing your gap. I can’t know for sure without seeing the overall project but this stands out. Try setting that to 0?

Sorry, that was my attempt at fixing it. When I remove it nothing actually changes. I can’t post links yet but maybe I could PM it to you?

Or take a screenshot maybe.

Yeah any way you can link or show more of your code would be most helpful. I believe if you check your PMs there is a bot that describes what to do to enable links.

1 Like

h ttps://codepen.io/V_irgil/pen/BMgGEM

Just fix the h since it won’t let me post an actual URL

Okay, so let me try to help:

  • Your first issue is that you used position fixed for the ul inside of the nav. Insted, you should use it for the nav.

  • Also you have used width 95% in the ul, wich made it strech, causing the spacing problem.

What I suggest you is the following: remove all these and edit the nav tag.

Secondly you would have to put a width of 100% to it and a position fixed, with top and left as 0 (to nav).

Lastly, you should apply a display: flex to it, to make it good and responsive and so it never loses the position, and set the flex-direction as row. You can then use justify-content: center; to centralize the items or justify-content: flex-end; to put them in the right end of it.

To make it better, use a margin: 0px 10px; to give a nice 10px spacing between each link. But you can add more if you’d like so!

You will end up with a CSS code like this:

nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;  
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background: #0D3D56;  
}

nav ul{
  font-family: "Open Sans", sans-serif;
}
nav ul li{
  display: inline-block;
  margin: 20px 10px;
}

Let me know if I was of any help!

2 Likes

Thanks for the link virgil. Here’s what I’m thinking so far:

  • Your blocks of elements are laid out in a way that makes it difficult to align and position different elements. A standard layout will look like this:
<html>
    <head>
        <!-- Contains information about the page such as title, CSS links, etc. -->
    </head>
    <body>
        <header>
            <!-- Contains header elements displayed on the page, such as <nav> and <h1> -->
        </header>
        <main>
            <!-- Main can be a div container, or a main element with a class or id that contains all main parts of the page such as paragraphs, images, videos, etc. -->
        </main>
        <footer>
            <!-- Contains footer elements with links, copyrights, etc. -->
        </footer>
    </body>

Your page is laid out this way:

<html>
    <nav>
        <!-- In the incorrect place, this should not go above the <head> tag and should be inside the <body> tag -->
    </nav>
    <head>
    </head>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
<!-- You are missing a body tag completely -->
</html>

My best advice for you is to revisit the HTML tutorials here on freeCodeCamp and take another look at what HTML elements are necessary, as well as which ones are helpful in building your page layout. The reason you are having trouble with your navbar is due to how your page is laid out, your missing tags, having the wrong tags nested in different areas, and applying CSS to the wrong elements. You would need to rewrite and restructure this entire page in order to get the result you are looking for.

This isn’t a terribly bad thing though! You have captured the correct ideas on displaying HTML elements and styling them with CSS. You’re doing 80% of the work correctly, you’re just missing key elements and details that will get you to 100%.

Continue asking questions here and you’ll be just fine!

2 Likes

Thanks for the help everybody! I’ll revist my html structuring. If I have further questions I’ll come back here.

Thanks again! This community is very supportive.

1 Like