Tribute Project - How to make my fixed header responsive? Code Critique?

Hello, all. This is both my very first post and my very first coding project, having spent just under a week learning and doing challenges here. I’m working on my Tribute Project, and I’m probably being a little overly ambitious, but I wanted to have a fixed header at the top. However, I am unsure of how to make it responsive and am having trouble figuring it out. A link to my project is below.

Other than that, I’m pretty much “done” with the project, so any comments on what I’ve done would also be appreciated. I’m sure my code is messy, things could be simplified, and I probably have things that I don’t really need, so any comments about that would also be great!

Link to Tribute Project

1 Like

I agree with SkyC…it looks good on desktop but I checked on mobile and the page renders kind of small esp. the font and links aren’t as clean. It’s cool if the resizing issue is handled. Not sure best way to go but setting max of min width and using adaptive container are good things to try. -Kevin

Good job on your first project.

Another thing you should pay attention to is not to wrap your buttons in anchors, it’s not valid HTML5. Bootstrap gives you the ability to directly style anchors as buttons (see here).

Edit: As an example, you can look at this fiddle to see how your header would look with bootstrap classes and minimal CSS. It’s still not responsive as a navbar\header (especially if fixed) should be and it’s just to show you how to achieve something with less CSS, keep that in mind (click the “Edit in jsFiddle” button to see the code).

2 Likes

Thanks much for your input and tips. Much appreciated!
I’ll keep those things in mind and give them a try today. :slight_smile:

Thank you!
I made that change to the header positioning, and it looks much better. Not sure why I was trying to do it the way I had before.

I very much appreciate the Bootstrap links and the suggestions! I’ll give those things a try this afternoon and edit my reply based on how it goes. I’d really like to get this project working properly before moving on to the portfolio one.

1 Like