How can I make a reactive navigation bar like the one on OkiOki?

Store Design
1

Hi there would anyone be able to help with how i can re-create this on my site, basically i want to re-create how the navigation bar works on this website https://okioki.com/ when you hover over 'mattresses’for example the little green arrow will turn upside down. Would somebody be able to help me with this?

joshualev_0-1650443968989.png

https://clair-de-lune.co.uk/

2

Hi There,
From your Shopify admin,

  1. Navigate to Online store > Themes > Select the main theme > Actions > Edit code
  2. From the code editor search for theme.css, this should be under the assets folder.
  3. Paste this CSS at the bottom of the page
li.nav-bar__item:hover .icon {
    transform: rotate(180deg);
}

This will only make the upper triangle turn 180degress when you hover over it. If you want it to work as the link you have set, there will extra customizations or use a third party app.

Thank you!

3

@collinsmbaka thankyou this works, however if you go on the site now, you can see there is still a faint grey arrow underneath this rotating arrow, could you help me remove this?

4

@joshualev Sure, you can paste this css below the last one on the same file

svg.icon.icon--nav-triangle {
    display: none;
}

Cheers!

5

@collinsmbaka perfect great thankyou for the help! just one more question ahaha, how would i make only the arrow and not the text contstantly this colour #98D1C9