I’m working on the landing page project. The issue I’m running into is that when I add position: fixed;
to my #header css, my header goes all wonky. What am I missing?
You’re not showing me your wonky code. I don’t see position: fixed; When you use position: fixed; you must also tell it where to be “fixed” such as top, right, bottom, or left and the pixel distance. Did you do that?
Why is your nav beside your header? The tests say nav should be a child of header.
Shoot. Because I forgot to save my edits. When I wrote my question, my nav WAS a child of my header (I was trying different layouts to see if I could figure out the problem). But reminding me that the fixed position needs to be included helped solve the wonkiness.
I fixed all the code–fixed the wonkiness. But the fixed header doesn’t pass the test.
Good Job! Notice now that it is not fluid. When you change the width of the browser you get a horizontal scrollbar below 1400px. That’s because you set a width of 1400px. One function of a container is to keep the layout from stretching too wide. For example, paragraphs become a single sentence. This is where max-width works better.
I’ve done all that, but fixing the header to the top in such a way that it passes the test has removed the spacing between the header and content, so now they overlap and the header no longer spans the width of the page. I feel like I must be missing something so obvious!
Let’s do the header width first. I’m willing to bet that you know of a CSS property you can put on an element to control its width. I’m 100% sure you can do this.
As for the header covering the content at the top of the page, one thing you can do is push the content down enough so it never goes under the header in the first place (when the vertical scroll bar is all the way to the top). There are many ways to do this. You already have some examples on your page. For instance, you have pushed down the flex-container div a little so that it isn’t so close to the div above it.
1 Like
Okay, so I fixed my overlapping issue! Thank you. But now…
- When I specify
width: 100%;in the header css, it extends beyond the parent container. And it does resize with the container if I change the window size.
Thank you so much for your help, these flexboxes are melting my brain a little!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.