How to make html drop down menus like these? (examples given)

Support
#1

So I’ve included a link to an example of drop down menus with the “HTML” field for the sub menu section, how can I do this in my Pro theme? Can you please give me the instructions and a sample HTML code to use in the modal drop down as well as the positioning (approximate) that I can then customize to fit what I need?

If you see their first drop down menu ‘software’ it includes all of the features that are on the other menus and the more simple drop down for example is ‘resources’ or ‘partners’ - I especially like the effect of mousing over and the background changing color to show the active hover within the sub menus.

please let me know if I need to be more specific, or can help you to help me in anyway. I’ll be watching the thread to see how to do it.

My website is https://easystartup.net

Thank you guys in advance. Theme.co is the best and I’ve recommended already 4 of my friends to you guys who bought licensees.

#2

Hello William,

Thanks for writing in!

You can achieve something like that in your example site by using UberMenu plugin. You can install it in X > Validation > Extensions. To know more about this plugin, please check this out:

Hope this helps. Please let us know how it goes.

#5

Hello William,

I see that you have withdrawn the ticket. We hope that solution tht @RueNel shared has worked for you. In case you have any issues, please let us know and we will be happy to assist you further.

Thanks.

#6

I’ve spent the last few days getting to play with UberMenus and figure it out, I actually have a few quick questions you guys can probably help me with. I’ve attached some images to help you see what I’m talking about.

  1. How can I add these arrows (circled) for the active menu item that’s being hovered over (As seen on Hubspot.com)

  2. How can I add the border to cover the top part of the mega sub menu that drops down ? I have enabled the borders on the sub menu and set the color however as you see in the screen shot it doesn’t appear on the top row, just the sides and bottom. (my website: https://easystartup.net - you can see what I’m talking about by hovering over the “products” menu item)

#7

Hi,

You can try adding the code below in Theme Options > CSS

.ubermenu-skin-minimal.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop {
    border-top: 1px solid #ccc;
}

With regards to triangle hover, that will require complex css code which is outside the scope of support that we offer.

To help you get started you may refer to the links below.



Hope that helps

#8

Thanks the CSS code for the top border worked. I’ll get started on the tutorials for the CSS triangle drop down, thank you for the resources you posted to get me started. I may touch back for some quick help once I have some perspective on the CSS triangles. Thank you again for all your support. Merry Christmas.

#9

You’re welcome. Glad we’re able to help.

#10

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