Sticky Top Navbar

1

Can someone, anyone, just be kind enough to help solve this whole content not positioning properly with fixed top navbar. A whole lot of people hgave this issue, and the only viable solutions i see are with libratries. I think there should be a decent Html And CSS approach. anyone?

2

I’m not sure what problem you’re talking about, but I can demonstrate how to make a fixed nav bar.

First set your styles on your nav bar like so,

.fixed-navbar {
    /* Give it a height so you can make a spacer
       with the same height after it is set to fixed.
       Give it width 100%, because otherwise when it
       is set to position: fixed it won't span the page. */
    height: 64px;
    width: 100%;
    /* Set position to fixed, set top to 0. Position fixed
       removes the element from the flow of the page and
       allows you to fix it using attributes like 'right',
       'left', 'top', and 'bottom'. Doing 'top: 0' attaches it
       to the top of the page. Adding 'left: 0' makes sure that
       the navbar touches the left side of the screen even if
       the body has padding. */
    position: fixed;
    top: 0;
    left: 0;
}

This will make the nav bar fixed. However, (and I think this is what you might have meant in your question), doing so will remove the nav bar from the document flow. It no longer exists as part of the document. Therefore, everything else on the page will move up as though the nav bar isn’t there (because it isn’t).

There are a couple of ways you can handle this. Since we made sure to give the nav bar a specific height, we could set the body to have a margin-top: 64px. You could also have another element in the page, like a div to act as a spacer and push everything else down like this.

.navbar-spacer {
    height: 64px;
}

You can see a demonstration of this on this pen I prepared as an example.

3

Thanks Micheal, I think the inclusion of the

with ‘.nav-spacer’ would do the trick.
I just don’t like it when you tap your nav-links and the page doesn’t just jump right

The hover effect for the cup cake button is hilarious. I like it

4

The hover effect for the cup cake button is hilarious. I like it

Thanks!

I just don’t like it when you tap your nav-links and the page doesn’t just jump right

Ah, I see. To be honest I don’t know what the “right” way to fix that is, but I definitely know a way to fix it.

If you do <a href="#recipes">, then you’re going to jump to the element with the id of “recipes.” What you can do is have the id on an element which lines up to where you actually want the page to jump to, even if it is different from where the title you’re linking to is.

Kind of hard to explain, but really easy to understand when you see it.

For example, you could put a span in your title like so, <h1><span id="recipes"></span>Recipes</h1>. The id is in the span, so that is the element you’re actually linking to. Then add some CSS like this,

#recipe {
    position: absolute;
    margin-top: -74px;
}

That’ll make the span float out of the title and position itself 74 pixels above it. Now when you click on a link it should jump to the right position.

I updated that CodePen to have an example of this for you. The “To the top” button is now a “Recipes” button (and the cupcake now takes you to the top, lol).

2 Likes
5

You are awesome man seriously. How did you learn all this CSS. And is it possible to know this much css and still be good at backend coding.
Cos that balance is ideal for few freelancing gigs

6

Practice makes perfect my friend. @mcaubrey seems to have a solid understanding of CSS which I’m sure they learned through trial and error/practice.

You’re doing the right thing right now by seeking help. You’ll grow by using this help and moving forward with it. Just remember to pass your knowledge forward one day when you feel like you have a solid understanding yourself.

Good luck my friend :clap:

2 Likes
7

@mcaubrey seems to have a solid understanding of CSS

Thanks!

How did you learn all this CSS?

Same as you! I learned CSS from FreeCodeCamp about two years ago.

And is it possible to know this much css and still be good at backend coding.

It is absolutely possible. It isn’t necessary to understand CSS to do back end work, but learning one doesn’t make you worse at the other.

If you want to get good at CSS (and really, anything you learn on FreeCodeCamp), my advice is to never be satisfied with a solution until you understand the solution. Don’t just be satisfied that margin: 0 auto centers an element. Look up the documentation for margin. There you learn that if margin takes two values, the first one is the margin on the top and bottom, the second value is the margin on the left and right. auto causes the web browser to automatically calculate the margins, and when it is set on the left or right value, it tries to fill up the remaining space with margin. Therefore margin: 0 auto centers an element it is applied to.

2 Likes
8

Thank you so much @RadDevDad. I surely will. I am opening a blog before the week runs out so I could document all these learning for others to get. I will keep learning

9

Waoooo. This is so true, Working on some amazing css tutorials from onlinetutorialsweb.com and I have decided that after couple of tutorials, I will look deeply into why and how.
Also I have downloaded devdocs.io so as to look through docs more. Tho they can be quite abstract at times lol

1 Like
10

There are a couple of ways you can handle this. Since we made sure to give the nav bar a specific height, we could set the body to have a margin

1 Like