By default, the submenus will open to the right side. Sometimes if the submenu structure is long, it might open out of the viewport on the right and the user will not be able to see it.
To fix this add the below-mentioned CSS class to the parent menu whose submenu is displaying out of the viewport.
ast-left-align-sub-menu For example:
If following is the menu structure:
About
> About Team
>> Team Members
>>> Team Responsibilities
>>>> Team Contacts
Then add a CSS
Detailed steps to add CSS class –
Step 1: From the dashboard navigate to Appearance > Menus.
Step 2: At the top right corner click on Screen Options and enable the CSS Classes option.
Step 3: From the menu structure click on the menu whose submenu needs to be opened at the left.
Step 4: Add CSS class ast-left-align-sub-menu and click on save.
Now the submenus will open like –
When you apply the ast-left-align-sub-menu CSS class to a menu in order to have its submenu open to the left, you might also want to adjust the position of the dropdown arrow icon to match this alignment.
By default, the dropdown arrow points to the right, but with a left-aligned submenu, it can look off-center. To fix this, you can use the following CSS to reposition the arrow icon:
#ast-desktop-header .main-header-menu .sub-menu .menu-item.menu-item-has-children>.menu-link .ast-header-navigation-arrow {
position: absolute;
right: unset;
top: 50%;
transform: translate(0, -50%) rotate(90deg);
}
.ast-desktop .site-header .sub-menu .menu-text {
float: right;
}If you are still unable to change the directions in which your submenus are opening, please reach out to our customer support team and we will be happy to take a look into your website.
