Awaiting an answer Templates

dropdown too far to the right

Asked by Charley Hankins 4 years ago Last activity 4 years ago

11 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
4 years ago

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

Charley Hankins Asked this
4 years ago

Sorry, that had no effect on my menu.

Thanks,
CH

Charley Hankins Asked this
4 years ago · edited

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.

Charley Hankins Asked this
4 years ago

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

Thanks,
Charley

Rashida Rahman Staff
4 years ago

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

Charley Hankins Asked this
4 years ago · edited

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.

Rashida Rahman Staff
4 years ago

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

Charley Hankins Asked this
4 years ago · edited

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

Charley Hankins Asked this
4 years ago · edited

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

Rashida Rahman Staff
4 years ago

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

Log in to reply.