Add an arrow to navlink

Hello all,

I was wondering if someone can help me, I’ve created a nav bar with navlinks and would like to add an arrow to the bottom of each navlink when somebody hovers over it so it blends in with the blue bar under the nav.

Here is my share link;

https://preview.webflow.com/preview/marcel-8f62cb?preview=bba51ebe7eade91664c36b27707a3b12

-Matt

Hey @Matty

Creating the Arrow

  • create the arrow in photoshop in the same color as your nav border
  • save it as png
  • upload it to Webflow

Adding the hover state

  • first, give a height of let’s say 70px to you navbar
  • then give a height of 85px to your navlink class
  • now go to the hover state of the navlink and add a background image. Choose the arrow png. add height value 15px. Position bottom-center. Tile = None.

and show us how it works :wink:

Best of luck,
Anna K

Worked a treat thank you :slight_smile:

1 Like

welcome @Matty

glad to help :slight_smile:

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