Skip to content
Submitted about 2 years ago

Responsive Landing page with Navigation

Reckson Zirsangzela Khiangte•180
@Saga-sanga
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

Finally finished up this project using CSS grid and flexbox. I used a lot of CSS selectors in this practice project. I also learnt how to use pseudo classes such as :not() and practiced mobile first design. My main question:

  • How do I change the svg color on hover? I tried using fill but it doesn't work for this specific SVG file.

Community feedback

  • lieneil•560
    @NJVSPosted about 2 years ago

    Hi, about your question. The color of the arrow svg is in the stroke, so instead of fill, just use the stroke property to change its color. But I've noticed that you embed your svgs using the img tag. As far as I know, the easiest way to alter svg icons' color on hover is to just use inline svg.

    Heres an article about ways to embed svg on html

    Marked as helpful
    0
    Reckson Zirsangzela Khiangte•180
    @Saga-sangaPosted about 2 years ago

    @NJVS Sure! I will try it out. Thanks for the feedback!

    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