Docs

[ccwadsworth]

Hi – I would like the submenu, which is located in a megamenu, to drop down under the item rather than to the right of the item.

http://www.watsoncaringscience.org
go to Programs > Watson Caring Science Center – University of Colorado > International Caritas Consortium (ICC)
or
Caritas Coach Education Program (CCEP)

Screen shot attached.

Thank you!

[Paul R]

Hi,

To achieve that, you can add this under Custom > Edit Global CSS in the Customizer.

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    top: 25px;
    left: 0;
}

Hope that helps.

[ccwadsworth]

Thanks for your response… It’s closer, but it now covers up the other items below it.
I would like the submenu item to show up under the link on the hover, while still being able to see and access the other menu items.
Appreciate your help – thank you!

[Lely]

Hi There,

To achieve that, we have to move the other menus downward once it is displayed. Please try to update above CSS to this:

.masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    top: 0;
    left: 0;
    position: relative;
}

Hope this helps.

[ccwadsworth]

Thank you! That is much better!
However, I’d like the vertical spacing to be consistent with the other menu items; this spacing is too big.
In addition, is it possible to indent the submenu so that it is easier to see?
Appreciate your help, thank you very much!

[Joao]

Hi There

Please add the following code to your Customizer/CSS

.desktop .sub-menu {
padding: 0em;
}

If you need some fine adjustment please adjust 0em to the desired size.

Hope that helps,

Joao

[ccwadsworth]

Perfect! Thank you so much!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts