Help understanding how to clean up Nav bar and sides

HTML-CSS
1

Hello, I’m currently working on a product landing page, and I’m having some trouble with the navigation bar.

I got the bar to look how I want it to, but I feel like the way I did it is going to cause errors. I was having trouble getting the logo and nav items on the same line. I finally got it but I had to use negative margins to get it correct.

That would be under the ul selector in my css. If anyone could help explain how I could achieve this properly that would be greatly appreciated.

I’m not sure if this is connected, but I also noticed there is a small amount of white space along the right side of the page where my main content goes. Any idea why?

Thanks!

I

2

There are a lot of ways handling these things. I don’t know whether there is a right way.

Just an idea: simplification
Create an own little codepen just with the nav-tag, an div representing the logo and ul/li representing the navigation

Put the background-color on the nav-tag and not on ul. This makes you more flexible.

Decide how you want to position the logo/ ul-navigation: you can use e.g. float:left/ float:right or flexbox or whatever.

If you’re done you can save that little codepen as a template and reuse it in later projects.

1 Like
3

Thank you very much. I’m going to try that

4

You need to add max-width: 100%; to #guitar in order to make the img responsive.

5

Hey there. Would you say that this is a more simple way to create a nav bar that would cause less future problems?

I used the suggestions you offered, which made me able to more easily control the margins.
Is there anything else you would suggest or code you might change? Feel free to pick it apart.

Thanks again for your help!

6

I didn’t look at every detail but the CSS looks much better and cleaner!

Nice effect with the moving lines in the navigation.

Maybe one thing: The logo size is 60% which is ok for desktop view but in smartphone view it’s getting very small. Probably you can size it (in smartphone-view with media-queries) with absolut values (px or rem). Maybe you had to make the navigation font a little smaller if there is not enough space.

7

Thank you! I appreciate you having a look at it. That’s a very good point about the logo, I never thought about that.

Thanks again for your help!