Navbar positioning in Html

HTML-CSS
#1

Hello,
I cannot move a position of navbar to the top of my page, but in the same time I have display: flex & top: 0px. I tried negative numbers with the top function, but still…it didn’t work. This is my code so far: https://codepen.io/patri22k/pen/mdqOJEz?editors=1100
Again, thanks everyone for your time and help!

#2

Think about what you can do to remove whatever margin is apparently there.

2 Likes
#3

Hey.
I took a look at your project.
Some HTML elements have margins and paddings by default.
What i usually do before beginning the real styling, is remove all the default margins and paddings. But that’s just my preference.
Another thing, i noticed you put the whole <nav> inside the <head>.
Don’t mix up <head> and <header>. They are very much different.
<head> is where all the <meta>s, <link>s, <script>s etc. go. <header> is just a container.
Hope this helps.
Cheers.

1 Like
#4

After 10th time of reading these comments and thinking really hard, I finally got it! For some reason, when I added margin = 0; to <html> tag, nothing changed. But when margin = 0;was added to the <ul> tag (I have it called .nav-list), it suddenly worked :D. Can you explain why it’s working just there, but not for the whole code?
As well it didn’t work for :

nav, 
body, 
footer { 
  margin = 0;
}
#5

I’m almost sure <ul> has a default margin, not <html> or <nav>.
But if you’re talking about inheritance, some CSS properties like font-family and color, do get inherited. margin and padding do not. So this is what i usually do:

*, *::before, *::after{
    margin: 0;
    padding: 0;
}

This selector * means ‘everything’, basically. I added the *::before and *::after, because those don’t get selected by *. You gotta select them explicitly, if you need those as well.
Glad i could help.
Cheers.

1 Like
#6

Thanks again for explanation.
Have a nice day.

#7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.