Why isnt my header coming together like a banner

#1

I cant seem to get the header to work together. The image and the nav bar wont stack one on top the other without one of them no longer staying in the top position when scrolling. When I get them into the fixed position, they stack on top of the other elements. I can get it one way but not the other. I also dont understand why header isnt working in the fixed position, so I added fixed to #header-img{} and nav{} as well. I have been on this for days trying to figure this out. can anyone point me in the right direction to get a page banner that is responsive and fixed to the top with the nav and img together?
How do I get the nav element below the logo, yet still fixed to top as I scroll into the other information on the page?

#2

Hey,

I’ve made a quick codepen with your code. But we’re missing part of it. So please, log in to codepen, and see your page here, and edit it properly.

Once you get the same page that you have in your PC in codepen, copy and paste the link in your post.

By the way

*{
text-align:center;
}

Is not quite right. The text-align property is inherited. This means that by writing:
body{text-align:center} you get the job done. It’s just a cleaner way to right your css. Probably performs better though these days it won’t be noticed.
One that’s done, save and paste the URL link in the post.

1 Like
#3

Thanks for the input. I was trying to use notepad+ so I wasnt over reliant on codepen. maybe that was a mistake at this stage. I put the thing on codepen. Here’s the link. Thanks for taking a look, and for the quick response.

#4

Well done, that’s better. Now edit the original post including the link, so everyone else can access it without scrolling down. And you can remove the raw code you pasted to make it look nicer.

1 Like
#5

Alright, it’s a bit messy. I’ll give you some suggestions, not a solution because it might take long, and it won’t help you if I just solve it.

Here I prepared a new codepen for you. I removed all the html elements but the header. Play with the header first. Try different layouts, try flexbox, grid, floats, positioning. See what works for you, and what doesn’t.

At the same time, it’s a good idea to learn about codepen, it’s your best friend here. I’ve also added a few comments on the CSS tab. Take a look.

Then you can go back and ask again.

1 Like
#6

Thank you so much for all your hard work here. I feel like I can get moving again.

1 Like
#7

Keep on, and good luck!