Docs

[freipartner]

Hi there

I’m currently working on a new website on this test domain:
http://kadetten.freipar1.myhostpoint.ch/

I’m trying to achieve a different look for the 1st and 2nd level drop down menus.
What I’d like to have is something like in the enclosed screenshot.

Is that even possible?

Best, Christian

[Rupok]

Hi Christian,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav .sub-menu > li.menu-item-has-children > a {
    color: #000;
}

You can add your CSS to this selector.

Hope this helps.

Cheers!

[freipartner]

Hi Rupok,

thanks for your answer. But that only changes the color of the drop down menu items.
What I’m trying to achieve is to have the dropdown menu beneath each other like in the screenshot.

The standard style is the one of the attached image. Please check again the image from my first post
to see the difference.

Best, Christian

[Christopher]

Hi there,

It’s not possible the exact same layout unless with custom development which is outside the scope of our support.

Please add following code in Customize -> Custom -> Global CSS :

   .masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    top: 2.15em;
    left: -12% !important;

}

Hope that helps.

[freipartner]

Hi Christopher,

Thanks for the CSS code. That looks quite nice. The only problem is that as soon as the 2nd level navigation is dispayed
the 1st level menu items below aren’t visible anymore.

You don’t have a solution for that which is inside the scope of your support?

Best, Christian

[Jade]

HI Christian,

I have checked your navigation and it seems to be working fine as the first level submenu still displays even if the second level is active.

[Author]

Posts