Hi there!

Sorry for your issue!

If I make the link width 100% then the arrow will appear at the leftmost area of the menu item. So here is the code you need to put in your custom CSS:

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
    width: 100%;
}

This might be improve the visibility I hope.

But if I give you code for making closer the dropdown to the items then it can be problematic for those menu items has long texts. However, I am giving you that code too:

body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub {
    left: 60%;
}

However, in my opinion the first code snippet will be better.

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

Sorry, that had no effect on my menu.

Thanks, CH

https://www.southark.edu/

My child menus are still too far to the right, making them difficult to click. They need to move over to the left some.

Is this page/issue being monitored? Should I begin a new session?

Thanks, Charley

Hi,

I am really sorry for the unwanted delay.

Where did you put the code snippet, please? Can I have your admin access to check?

Best Regards

I placed the code snippet into the Custom CSS section. It had no effect. As though it were not reading the Custom CSS section.

It works when using the Inspect tool in Chrome, but not when I place it into my Custom CSS.

Hi,

Please take my apology again.

I have made some changes to your template's custom CSS. As there are so many copy of the Helix Ultimate template styles, so I had to check by placing the code to many of them.

I have found the following style assigned to your home page "shaper_helixultimate - Default (HOME PAGE)"

And this custom CSS part gets the right code now. So if you want you can place the code into all of your template styles where needed.

Here is the code snippet for your ease:

/* changes made by Rashida */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a,  {
    width: 80% !important;
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-sub li.sp-menu-item>a{
width: 95% !important;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
    width: 80% !important;
}
body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub {
    left: 80% !important;
}

Have a nice day!

Best Regards

I'm not certain, but I believe we have it fixed now. I had to play with the code a little for the default template. I'll drop a line if I notice something off.

Thanks, CH

I'm using the same snippet you provided in the DEFAULT template and the HOME template.

The menu from the HOME template looks good.

The menu from the DEFAULT template does not look the same. The child menu looks as though it has a very wide right margin or padding that is preventing the menu titles from going all the way across the menu space.

scroll over "Academics" or "Pay for College" on the site southark.edu.

See attached image.

Thanks for your assistance.

Charley

Hi,

Please use the following code within each and every Template Styles:

/* changes made by Rashida */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a,  {
    width: 80% !important;
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-sub li.sp-menu-item>a{
width: 95% !important;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
    width: 80% !important;
}
body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub {
    left: 80% !important;
}

Then all will be the same. Thanks for your patience.

Best Regards

Hi. I have placed the same snippet in both templates. Both menus are not responsing in the same manner. See image above.

Thanks, CH