Indigo CSS Problem
I upgraded my site from an older version to the latest Joomla version and your Indigo template.
The CSS preset isn't working because some elements aren't changing, even though I had changed them in my previous version.
How do I make these changes to the CSS:
1 - Menu width
2 - Menu and page colors
You need to explain to me how to make these changes.
Thank you for your help
Hi there!
Thanks for reaching out.
If the spacing among the letters is not intentional, then removing it should help to fit the items in the header and it will improve the horizontal alignment too.
Kindly use the following code to change letter spacing and menu item color in your custom CSS:
.sp-megamenu-wrapper>ul>li>a{
letter-spacing: normal;
color: red;}Kindly explain, what do you mean by page colors.
Best regards,
1 - Hover color. The code isn't in preset.css.
2 - 1px offset
3 - 1px offset on hover
See image
I solved problems 2 and 3 myself, but there are still other bugs in the CSS and the support teams are in no hurry to help.
#sp-header li.sp-menu-item { height:52px; }I solved problem 1 regarding the color.
I added my modifications to the preset I'm using.
.sp-megamenu-parent {
> li {
> a,
> span {
&:before {
background-image: linear-gradient(100deg, #f142aa, #ec008c);
}
}
&.active > a {
background-image: linear-gradient(100deg, #f142aa, #ec008c);
}
}
}For the colors, we have to change them in template.css because the preset only handles a very small part.
Another bug: if you have a menu at the bottom of the page, you might get consecutive links. If you encounter this problem, you need to force the li element to span its entire width.
#sp-bottom ul.menu li { width: 100% !important;}It's a shame that this template and its CSS have bugs. It's not very practical to maintain and it wastes time trying to find everything. There's no documentation for these problems.
Hi,
Sorry for not being there for a while.
The template.css or preset.css files are not recommended to edit as it will be overriden with updates. Kindly use Custom CSS field of your template options or create custom.css file to place all your custom CSS there. Here is all about custom code placement in Helix Ultimate framework:
https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
Best regards,