Skip to content
Submitted over 2 years ago

intro-section-with-dropdown-navigation-main

Hrishikesh kadam•30
@hrishikdm
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro section with dropdown navigation
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi, this is hrishikesh and I accepted this challenge and made this responsive drop-down Navigation bar by using HTML, CSS, and javascript, and I hope you like my final solution

problem = I really struggled with the drop-down SVG arrow because when I add a hover effect on it for stroke color change it's not working I tried everything but it's not working If you have any solution then please show me it could be very helpful.

Thanks for looking at my solution

Community feedback

  • Yehan Nilanga•670
    @Yehan20Posted over 2 years ago

    Hey Firstly congratulations , on completing the challenge , you could look at the report and fix those html issues and accessibility issues in the report to make your solution better, now regarding the hover thing , I used js to remove the event listeners at large screen I added by break point after 768px , then I was able to add the hovers with ease, and again when i reach sizes less than 768px I would add the event listeners back , I used the window.addEventlistender("resize",()=>{ // Code here ) do achieve this , i used inner Width to get the width. Regarding the svg , you could just use a transform rotate on the svg to rotate it in large screens , to select the svg image on hover nav ul li:hover img this selector would work and you could rotate it . I hope my answer was helpful good luck in other challenges.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord