Just need help with my react project

I have some problems with my project.

  • the "margin-left : auto; " doesn’t work for my nav buttons.
  • the nav menu is defaulted to be open although i set the visibility to hidden by default
  • and I have a problem showing the right arrow image depending on whether the navMenu is open or not… should I set State for every image or would it be too much state ?

live site: Frontend Mentor | Intro section with dropdown navigation
code repo: GitHub - onna4/react-intro-section-with-drop-down-navigation-menu: react intro section with drop down navigation menu

Your live site isn’t working.

  1. Not sure what margin you are talking about. You have left/right auto margin on nav button and then other margins inside the media queries.

  2. I don’t think that is true. As you are using React I might suggest you create two different components for the navs and render them conditionally based on the viewport. I would use a hook or a lib to do the media query-based conditional rendering. Even if you do not use conditional rendering having two separate components for each nav is probably a good idea. Using a single component/element that changes its look and position using CSS depending on the viewport can get harder to reason about, maintain, and extend.

  1. Using state is fine, then you can do conditional rendering using it.
1 Like

sorry about the site not working… now it works…
yes i’m using react. thanks for the solutions offered by you.

One piece of advice. The hamburger icon needs to be in a button element and that is the element that should have the click handler attached to it. Adding a click handler directly to the img is not accessible. Also, for good accessibility, you need to add the aria-expanded attribute to the button. When the menu is not showing then it should be aria-expanded="false". When the menu is showing then it should be aria-expanded="true".

Also, you don’t need a separate close button for the menu. Just use the one button as explained above and when it is closed you have the hamburger icon in it, and when it is open you have the close “X” icon in it. The alt text for both should just be “menu”.

1 Like

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