Need help with Flexbox for Product Landing Page pls

Hello!

I’m struggling with aligning the logo and nav links. I’m still getting comfortable with Flexbox. How can I get my logo closer to the left of the page and the nav links closer to the right of the page?

Product Landing Page

Did you mean logo closer to the left of the page and nav links closer to the right of the page? If so, perhaps justify-content: space-between is what you want? Otherwise, I’m not sure I understand what you want.

1 Like

Sorry for the typo. Yes, you understood correctly. I’ll give that a try.

Hi Nichelle,
If you’re still struggling with the Nav Bar, I made a rendition here:

https://codepen.io/ALLESSANDRA-DE-SAINT-AMORE/pen/VwypMgJ

It’ not exactly the same as the FCC version that you’re using, but it may be able to help you grasp the construct.

Screenshot 2022-03-26 12.25.54 AM

I have gone through your code, I noticed the nav tag is not place inside a div just like the img tag. I hope this help.

1 Like

Yes this definitely helps me understand better. Thank you so much!

I have a question about navbars, though. It seems like the standard is to use a <ul> . Why is that? Just trying to get a better understanding.

1 Like

This is primarily an accessibility feature. If you are blind and listening to the page then the screen reader will tell you how many items are in the nav menu when you use a list (the screen reader will announce something like “list with 10 items”). If you don’t use a list then the screen reader won’t tell you how many items are in the menu. If you only have a couple of links in the menu then this is probably not that big of a deal. But it doesn’t hurt anything to mark it up with a list and it can only help screen reader users and thus it has become the accepted best practice.

1 Like

Hahaha. I thought this yesterday, while I was doing the code for the Navbar…
I was like, " Why DO we use <ul>?.."

Happy this post is benefiting everybody😂

: )

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.