Nav bar Freezing my page

HTML-CSS
1

Tell us what’s happening:
Hello fellow campers…
I’ve been stuck at this for weeks now, have exhusted all options and here is my last resort…please help…
Each time I add fixed position to my header it freezes the whole page instead of sticking the header alone and my nav-links have disappeared to only God-knows where…What exactly am I doing wrong…

Your code so far
Here is the link https://codepen.io/ugoamaka/pen/vYNrKeg

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; CPH1909 Build/O11019) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Hi :wave:t2: Don’t panic, there are couple of small mistakes that you’ve made, but it only means that you’ll learn something new, or it will add points to your experience :slight_smile:

  1. The page freezes because you have a typo in opening <header> tag, it says <heaader>, so it breaks the layout.

  2. Nav links didn’t disappear, they are just beneath the header element. Header now sits on top of it. The reason being that positions like absolute or fixed take the element out of the normal document flow. Take this page structure for example:

<html>
  <body>
    <header>Header</header>
    <div>Div1</div>
    <div>Div2</div>
  </body>
</html>

So normal flow will be: the header element is first element, right after it on the next line is div1, and after it on the next line is div2. Simple document flow, elements appear from top to bottom.

But if you set header to position: fixed, it is out of the normal flow now. While it remains inn the structure of the document it self, it’s taken out of the flow, so now it’s Div1 -> Div2, and Header is somewhere on the page, but it’s not in the flow.

I’m not sure if fixed example was really helpful, but it’s hard to explain it without demo.

3

Thanks for reaching out. I perfectly understand what you mean…I have edited the mistakeelement and its flowing ok now…
So the issue now is how to make body come below the header instead of staying under it and also make the nav-links appear appropriately as I intend to make it a menu icon

4

Actually, the reason why nav-links are not visible is not because of position: fixed, I made a wrong assumption too quickly because, I saw similar text underneath the header. You need to check the overflow-y setting, if you switch it off it should be visible.

As for the rest of the content, you need to push with margin-top by the same amount of pixels as the height of the header. So if header is 50px, then you have to push main 50px, so it’s not hidden under the header.

Next, you need to fix this: <div class"logo">.

Finally, think of your nav-bar, as a box containing other boxes, see the attached photo.

IMG_3225
IMG_32254032×2016 1.61 MB

Once you internalize, that every element on the page is box, and think of it as boxes, that you can align almost anyway you like, it will start to make more sense how to think of layout.

5

You have really been helpful…thanks.
Please help me check again,
The menu is not fitting properly

6

Once am done with the header I can easily fix the other parts…