Submenu Aligntment

Hi,

We have our sub menu options set up to be center aligned however; we want our third level menu to come out on the right hand corner or create a drop down menu from the sub level menu.

Could you please let us know how we can do that?

This is our current set up:

Thank you,

Chelina

Hello Chelina,

Thanks for asking. :slight_smile:

Would you mind sharing website URL for us to take a closer look?

Thanks.

Hi Prasan,

Thank you for getting back to me.

This menu is in our member area, I will send you my log in details so, you can have a look.

Our URL is http://forensichealing.com/

Thanks,

Chelina

Hello There,

Thank you for providing the information. To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

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

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

It worked!

Thank you so much!

Have a wonderful week ahead!

Warm regards,

Chelina

Sorry, we have decided to create a whole new menu, could you please advise how we can align this?

Also, are you able to advise how we can reduce the font size of the sidebar menu?

Thank you,

Chelina

Hello Chelina,

To adjust the font size in your sidebar menu, you can make use of this code:

aside.x-sidebar .widget_nav_menu > div > ul > li.menu-item a,
aside.x-sidebar .widget_nav_menu > div > ul > li.menu-item a strong {
    font-size: 1rem;
}

aside.x-sidebar .widget_nav_menu > div > ul > li.menu-item {
    line-height: 1.1rem;
}

Hope this helps. Kindly let us know.

Hi Ruenel,

Thank you. It worked.

But we still have the issue with the sub menu as it will not show the whole fourth level menu.

Could you please advise?

Thank you very much for your time.

Thank you,

Chelina

Hi Chelina,

Upon checking, I can no longer see third or fourth level sub menus.

Have you decided to remove it?

Please let us know.

Thanks

Hi Paul,

It is still there. This is in the member area, kindly log in using the account I have provided in the previous message.

Thanks,

Chelina

Hi Chelina,

Since the space on the right is not enough, let’s move the submenu on the left. See this: https://screencast-o-matic.com/watch/cbQrfcI0bK
Please note that the issue here is the limitation of the space available.
Update this:

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

To this:

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

Hope this helps.

Hi Lely,

Thank you for your message.

The codes work but it does not look to pleasing when the menu is going to the left. Are we able to do an accordion type dropdown menu?

Chelina

Hi there,

Accordion isn’t possible since the structure doesn’t match with the existing accordion scripts. How about a mega menu? Like from here https://theme.co/apex/forum/t/features-megamenus/99

Thanks!