Docs

[crucialtim]

Hello,
I noticed on a client’s website that the dropdown navigation is problematic. It goes two levels deep, and on the second level, the submenu disappears as you’re mousing over it, before you can click on the item.

In this case (screenshot attached), I’m talking about the submenu item that says “Book your session.”

[crucialtim]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! I have tested and the submenu seems working as expected. Here goes a screencast on my end – http://recordit.co/RFhtx0sCbX

Cheers!

[crucialtim]

Here’s what I’m seeing: http://www.yogawithcr.com/wp-content/uploads/2017/01/ycr-nav-012317.mov

If I mouseover one of those sub items, it disappears on me before I can click it.

[Nabeel A]

Hi again,

I checked your site in couple of browsers and couldn’t replicate the issue, can you please try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    right: auto !important;
    left: 100% !important;
}

Let us know how this goes!

[crucialtim]

Thanks Nabeel, this seems to have fixed the issue for me. I’m no longer seeing it in my web browsers.

One other question: how can I change the padding around these submenus? See attached.

Thanks Nabeel!

[Rupok]

Hi there,

Thanks for writing back. Here goes the default padding for this :

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

You can change the value and add as custom CSS to override the default padding.

Cheers!

[crucialtim]

Perfect, thanks so much Rupok!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts