Hello Support Team,
I am currently working with your Joomla template and the SP MegaMenu module, and I need your assistance with two related front-end customization issues that I have not been able to resolve via CSS overrides.
1. Persistent white separator line in the main menu (level 1)
There is a persistent white horizontal line (separator) appearing in the main menu items (top-level / level 1), as shown in the attached screenshot. This line appears behind or around each menu item and remains visible regardless of background or hover state.
What we have already tried:
Removing ::after pseudo-elements on:
.sp-megamenu-parent > li > a::after
.sp-megamenu-parent > li > span::after
Applying background: transparent !important
Removing borders (border-bottom: none !important)
Targeting dropdown and non-dropdown selectors separately
None of these changes affect the line, which suggests that it may not be controlled by the standard ::after pseudo-element, or that it is generated by another wrapper element, SVG, background image, or JavaScript-based style.
2. Hover gradient on the main menu
Additionally, the hover effect on the main menu items uses a gradient background, and we need to customize or fully replace this gradient to match our brand guidelines.
Could you please clarify:
Where this hover gradient is defined?
Is it controlled via template options?
A specific CSS file or variable?
Inline styles generated by the template or SP MegaMenu?
What is the recommended way to modify or disable this gradient without editing core template files?
What we need
Identify the exact selector or mechanism responsible for the white separator line in the main menu.
Guidance on how to safely remove it.
Clear instructions on where and how to customize the hover gradient of the main menu items.
This will allow us to apply the required changes cleanly and maintain future compatibility with template updates.
Thank you in advance for your support.
Kind regards,
Ivonne
Joomla Version: 4.4.14
Template: Indigo
