X Pro - Customized Dropdown Menu

Hi,

I"m trying to mirror a dropdown menu like https://lewishowes.com/ and I can’t seem to get it to work. There are two issues in particular that I can’t seem to solve:

  1. Can we add any type of triangle or shape to the top of the dropdown as Lewis has under his “Podcast” tab?
  2. Is there anyway to get the dropdown menu to sit inside the navbar space instead of resting underneath it? As you can see on his, the dropdown almost pops out over the background color of his navigation.

Thanks for your help!

Hello @philahudson,

Thanks for writing in!

1.) Yes, you can add a triangle in the menu item that has a submenu. Please edit your header and then in your navigation inline element settings, find the Top Links > Particles tab.

2.) The dropdown menu will always hang underneath the menu item which will also be outside the navbar. This is how dropdown works.

Hope this helps.

Thanks for the quick response!

Unfortunately, I don’t think that’s doing what I need. I added the settings just as you had them and it just produced a line that hovers underneath my top links. I don’t see how to add a triangle shape that joins the dropdown menu like https://lewishowes.com.

Any advice will be helpful. I’m sorry if I missed something.

Hi @philahudson,

Regretfully that is not possible out of the box, but you can apply the CSS Triangles with :before and :after tricks provided here.

Hope it helps,
Cheers!

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