Greetings Nakoya
- the li elements for the navigation must have anchor element as a child. Product, feature , pricing are links to other pages or sections.
- positioning of the nav between mobile, tablet and desktop can be done with css, creating different nav for mobile and desktop is not best practice for responsive design.
- use semantic elements. A div should not be used in place of a button as in the case below and that of the close-icon. A button is an interactive element, for a div to be accessed as a button by assistive technology users requires a lot more coding.
<div class="hamburger-menu">
<div class="menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
<g fill="#242942" fill-rule="evenodd">
<path d="M0 0h24v2H0zM0 7h24v2H0zM0 14h24v2H0z" />
</g>
</svg>
</div>
- as explained above , the element below has to be an interactive element, most likely an anchor element
<p class="call-to-action">
<span class="button-link">Schedule a demo</span> to see a preview
</p>
Marked as helpful
@nakoyawilson
Posted
@ChamuMutezva Thank you for the feedback, Chamu. I changed my code to have only one navigation and used the button tag instead of the div tag for the menu icons. With respect to the li elements and call to action, I chose not to use anchor tags because there are no actual links and I thought it would be bad to have links that don't go anywhere. Would it be better practice to include the anchor tags and use JavaScript to disable the links?
@nakoyawilson, I would use correct elements where possible. If you are using the projects to showcase what you can do, then it would be assumed you are not using the proper elements. Although the links are not going anywhere, it really doesn't matter.