Thid level Sub menu open right on hover

[harish]

I’m trying to make the thrid level sub menu open to the right instead of going to the left.

I tried to use this css code to .masthead-inline .x-navbar .desktop .sub-menu {
left: 0;
right: auto;
}

Sub menu open right on hover

[christopher]

Hi Harish,

It is nearly impossible to detect the width of the second level with CSS to be able to force the 3rd level go right. But the problem is that the theme does have the menus opened up to the right by default.

Please check your custom code or the Child Theme and bring back the normal way the theme works and you will have the 3rd level opened to the right.

Having said that, for this specific request you can add the CSS code below to X > Theme Options > CSS:

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

Please make sure that you update the theme to version 6.1.5 as you are using version 3.1.5 of the Cornerstone which is not compatible with the current version of your theme. For more information on updating the theme:

How to Update | Themeco Docs

Thank you.

[harish]

@christopher.amirian

But the problem is that the theme does have the menus opened up to the right by default.

How do I open the menus to the right by default?
I didn’t add any css to make the third-level submenu hover left instead of default right settings. There is no major theme update to do, Im currently on 6.1.3.
It looks good when the menu is stacked below the website logo but it hovers left when the layout is set inline. Not sure what is going on.

For now I used the additional code you provided but If it should go right by default why does it go left for me?

Also the wierdest part is that: Heading element doeshn’t show background image anymore even when I used the background type to a specific background image. you can see “TRUE TECHNICAL EXPERTISE” section without background image. we are about to end this project and deliver it.

Please help me out.

Thanks

[nabeel]

Hi again,

To open menu to the right by default, add the following code as well:

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

For the background image issue, can you please try turning off the parallax effect for that section and see if this works?

Let us know how this goes!

[harish]

your default code to hover third level submenus doesn’t work. it populates the third level menus over the top of second level menus using your code.

but the css Christopher provided earlier worked. I’m just checking to see why it is not set to default by default (why should I even have to add css code for default setting like this?)

disabling parallax effect worked for the background image. Thanks (not sure why but it’s okay).

[christian]

Hey @harish,

Sorry for the confusion. The theme’s design displays the third level submenu to the left. You can see that in our demos except for the Renew stack. That is by design. In order to display to the right, you’ll need the code @christopher.amirian gave.

Thanks.