Subsubmenu orientation

  • X

  • Renew Stack

  • Standard dropdown menu

  • navbar on scroll fixed


Hello Support,

I´m struggeling right now getting the subsubmenu in my fixed navbar on scroll to behave the same way as the stacked navbar with logo behaves at top of the page. To be clear:

  • Subsubmenu opens on the right side with correct margins when I´m at the top at the page and the standard navbar is shown (all this is great and should be achieved at the fixed navbar on scroll aswell)
  • subsubmenu in the fixed navbar opens to the left with different margins (this should be changed to the look like above in the standard navbar)

thank you in advance and let me know, if you need more details!

Hi there,

I have tried testing this in my installation but I am not able to replicate it.

Would you mind providing the URL of your site so that we can check?

Thank you.

Thank you very much! Site isn´t published yet, but I send you a private notice so you can access my page

Hello @Gehess,

You are experiencing this issue because the submenus has different behaviour when it is stacked or inline. And since you added the custom JS to change it’s behaviour, you also need a custom css to have a consistent behaviour. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

body .masthead-inline .x-navbar .desktop .sub-menu .sub-menu,
body .masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    top: -1.75em;
    left: calc(100% + 1.75em);
    right: auto;
}

We would loved to know if this has work for you. Thank you.

1 Like

Wow! This is almost perfect. If you just could help me with one more modification. At the moment, the dropdown menu is at top of the page justified to the left of the main menu item. If you scroll down an open the same menu item, the dropdown menu is justified to the right border. How can I modify this so that it will be justified to the left border aswell?
Thank you very much

Hi,

To achieve that, you can add the code below in Theme Options > CSS

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

Hope that helps

1 Like

Thank you again! This is all I wanted! Love your support!

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.