Beginner Needing Help with navbar & form

Here’s a link to my pen - https://codepen.io/bobbyfranchize/pen/BamOKbY

Just starting here so there is probably loads more wrong with the code than just these issues…however…

I can not seem to get the navigation bar to resize properly when the page is made larger and smaller. When the page is fully extended to its max width the nav bar appears and does not cover any other content…

But when I resize the page smaller to a certain width (~1000px) the nav bars height changes and covers part of my logo and banner. How can I fix this?

full size is fine, then I resize to under 1000px and nav bar becomes crunched and stacked.

The other big issue I was having is centering this form in the middle of the page even as it get larger. I tried a couple hours toying with everything and couldn’t find a solution.

I want it to appear in the center no matter what, I tried using position: , flex: , margin; , etc. but nothing seems to work. Any advice?

And lastly, I keep getting a failed story that the nav bar should always be at the top of the viewport…but it looks like it is for me? I coded the nav bar to have position: fixed; but am still getting a failing result.

Thanks!!

Hi @robert.francesejr,

You chose a torture path if you allow me to say! :slight_smile: I really suggest you to simply give up the float positioning an orient yourself more around Flexbox or Grid. You can have an aesthetic navbar in few code lines. Same for the body, same for the form. Also, don’t transform it in inline-block it will give just troubles here, more than you have.

Did you followed entirely the freeCodeCamp curriculum? I just ask to know if you saw the principals about Flexbox (or grid).

Dang. Yeah I figured there was going to be growing pains as I just get started here lol. I didn’t even consider using Flexbox or Grid yet and I’m not sure why. I guess I got married to the idea of those other element changes and didn’t even think to try something different. I did finish the Basic CSS and HTML curriculum a couple weeks ago…perhaps I need to go back and brush up on that stuff some more.

Probably will scrap this one then and start from new!

Thanks! :slight_smile:

It could be good to check again these parts, for a quick refresh, and try in the same time you are reviewing. In fact, the positioning way you chose is kind of way the first trick the devs found to position elements on a page, so a long time ago. Since, appeared the positioning with absolute/relative, after Flexbox and more recently Grid. Flexbox is supported by most of the browsers now, except some old versions of IE (if I don’t say nonsense).

I promise to you that if you were programming with the float positioning, you will feel relieved in doing it in Flexbox, much less time loose and much aesthetic positioning. Really less complicated.

Well @robert.francesejr, if you need help or don’t understand something, don’t hesitate to ask. I’m sure you will go through this! :slight_smile:

1 Like