Can the Sub Sub Menu Appear Underneath the Sub Menu Instead of to the Side?

[core365]

Hi, I’m working on a site which has sub sub menus, and at the minute when you hover over the sub menu, the sub sub menu appears to the left which looks odd! Can the sub sub menu appear under the sub menu instead of to the side?

Here’s the URL, if you hover over ‘Eaton Products’ then hover over ‘Control Stations’ it reveals the sub sub menu ‘GRP’. I’d like the sub sub menu to be within the menu that is currently there instead of making a further pop up to the side, so it opens up under the sub menu which will push the other sub menu titles further down to accommodate for the sub sub menu. Hope that makes sense!

http://www.tech-exsystems.com

Thanks!

[nabeel]

Hey @core365,

Thank you for reaching out to us. Yes that can be done with custom CSS, please add the following code in the Theme Options > CSS:

body .masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    position: relative;
    top: auto;
    right: auto;
    float: none;
    padding: 0;
    min-width: auto;
    background: none !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Let us know how this goes!

[core365]

That is great, thanks!

I’d like to style the sub sub menu with a background colour to make it stand out a bit more from the sub menu. I can’t figure out the CSS to do it with though! Hope you can help!

Thanks!

[Prasant]

Hello @core365,

Thanks for asking.

You can update the previous code given by my colleague to include background color. Here’s the updated code that you can use:

body .masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    position: relative;
    top: auto;
    right: auto;
    float: none;
    padding: 0;
    min-width: auto;
    background-color: #54c0a9 !important;
}

Please change the color code as per requirement.

Thanks.

[core365]

Excellent! Many thanks for your help!

[basanta]

You are most welcome!