Design Help: Dropdown Navigation with carats marks

Does anyone know how to make the drop-down menu like on this template site:

I am also wondering how they complete the mini carat triangles on the edge of the div tags?

Any help would be appreciated.

Here is my site Read-Only: LINK
Demo Site: LINK

Hi, @BenjaminBachman! Which piece do you need help with specifically? Styling the drop-down menu, or the secondary drop-down menus?

Thanks @rileyrichter for jumping in.

  • Styling the secondary dropdown moving off to the right
  • Styling the little triangle carat that shows up through the whole dropdown experience.
  • Having the hover state impact both the carat and the dropdown link.

Hi, @BenjaminBachman! Happy to do it! I’ll throw a video together real quick to walk you through it!

1 Like

Nice of you to make a video can you share a link to the video please. I also might want a secondary dropdown (over) menu sometime.
Thank you

1 Like

Video coming! Waiting for export right now! :slight_smile:

Ok, @BenjaminBachman and @Steven_Harris! Here is the video. I know I move a little fast. Sorry, but I am in the middle of a project and I’m pushing to complete! You should be able to pause and watch and go any speed you like. Enjoy!


Clone the project right here:

@rileyrichter 1000 thank you’s! I deeply appreciate your time. This gives me the building blocks to make this a win.

The one thing I still have a question on is the carat’s that you see in the demo template I included:

I circled what I am talking about here:

1 Like

Ahh, this is actually pretty simple to accomplish. Give me a bit and I’ll make a supplemental video for you that explains that piece.

@rileyrichter you are saving the day here!

1 Like

Hey, thanks! I appreciate that @BenjaminBachman! So here is a video (no audio) showing one way to accomplish it. This could obviously be much more polished, but tried to do this quick!

@rileyrichter again thank you! You nailed it! I will share my cleaned up final version with you once I get it completed. Thank you!

1 Like

De nada! Glad to help!