Streaming live at 10am (PST)

Design Help: Dropdown Navigation with carats marks


#1

Does anyone know how to make the drop-down menu like on this template site: http://demo.neambo.com/act2

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


#2

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


#3

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.

#4

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


#5

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


#6

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


#7

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!


#8

Clone the project right here:


#9

@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: http://demo.neambo.com/act2

I circled what I am talking about here: https://www.dropbox.com/s/vyrdwx6wpsv6v9n/Screenshot%202018-06-18%2015.28.09.png?dl=0


#10

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.


#11

@rileyrichter you are saving the day here!


#12

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!


#13

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


#14

De nada! Glad to help!