Changes in navigation and footer setup after updating helix - Forum | JoomShaper
Solved Helix Framework

Changes in navigation and footer setup after updating helix

Asked by Berufskolleg für Technik und Gestaltung 3 years ago Last activity 3 years ago

Hi team,

Afte having updated helix from 2.0.9 to 2.0.11 and Joomshaper 3.8.6 to 3.8.9 the font color in the top bar has become grey. It should be white.

Also, the font color of navigation items are black instead of #b61F29. In particular, I did in custom css

/ Menu items color /
.sp-megamenu-parent > li > a
{
color: #b61F29;
}
That wouldn't change anything.

When hovering over the subitems the color is blue and not #b61F20.

I also wonder how to get my top1 module and my top3 module in the top bar in one row. The top bar itself can be of a lower height if that is easier.

Here is the link to our page:

www.btg-ge.eu

I appreciate your help,
Isabelle

Accepted answer

Marked as the solution
Pavel
3 years ago

If you use the code in this form, then there is errors. That's why it does not work.

/ Active color of menu item / .sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a { color: #b61F29 important!; }

/ Color of hover menu item / .sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li:hover > a { color: #b61F29 important!; }

Should be

/* Active color of menu item*/ .sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a { color: #b61F29 !important; }

/* Color of hover menu item */ .sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li:hover > a { color: #b61F29 !important; }

And the code can be less.

.sp-megamenu-parent > li.active > a, 
.sp-megamenu-parent > li.active:hover > a, 
.sp-megamenu-parent > li:hover > a {
    color: #b61f29 !important;
}

10 more replies

Oldest first Newest first Most helpful
Robert
3 years ago

Let me guess, the colors of the main menu changed into blue (hover,active)?

Berufskolleg für Technik und Gestaltung Asked this
3 years ago · edited

Robert, yes, among other issues, that is one problem. Should I solve this via custom.css although the set up in heliz is still not blue?

Strangely, the issue happens only on some devices/ browsers. E.G. on my iPhone, the issue is there. Not on my macbook/CHrome/Safari. In Firefox, the issue is the same.

Thanks, Isabelle

Rashida Rahman Staff
3 years ago

Hi there!

Sorry for your experience.

The workaround came in Helix Ultimate 2.0, where it became possible to configure predefined presets.

Kindly, use one of predefined presets with your own сonfiguration, instead of custom style. Then update should not interfere with existing colors.

https://prnt.sc/Sxlk0pJ41p_v

https://prnt.sc/AW4Xhp0FhOEm

Kindly do let me know if this helps! Clearing Joomla and browser cache is always important.

Best Regards

Robert
3 years ago

I'm posting this for months now. its a bug. Somehow after an update colors in menu change often. Had to force most of my websites with custom css to keep the colors as set in presets. Every time its blue. That is the standard Helix template colors in the menu.

Berufskolleg für Technik und Gestaltung Asked this
3 years ago

Hi Rashida,

Thank you. I tried that out, including clearing cache and cache browser. The result is not as intended.

So, I think that a workaround in custom.css should be the better opinion.

Still, I wonder why the changes that I made in custom.css (e.g. / Menu items color / .sp-megamenu-parent > li > a { color: #b61F29; }) do not work. Do you have an idea?

Again: I also wonder how to get my top1 module and my top3 module in the top bar in one row. The top bar itself can be of a lower height if that is easier.

Thank you,
Isabelle

Pavel
3 years ago · edited

Hi Isabelle.

I do not see that your custom.css file contains this code.

.sp-megamenu-parent > li > a { color: #b61F29; }

Only this code there for menu items

Again: I also wonder how to get my top1 module and my top3 module in the top bar in one row. The top bar itself can be of a lower height if that is easier.

Here is

#sp-top-bar .row {
    align-items: center;
}
.mod-languages .btn.dropdown-toggle {
    padding-block: 0;
}
Berufskolleg für Technik und Gestaltung Asked this
3 years ago · edited

Pavel,

yes, I tried this code in my testing page first. The color has changed now. Solely, the color when hovering and active do not change from blue to #b61F29. Made this:

/ Active color of menu item /
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a { color: #b61F29 important!; }

/ Color of hover menu item /
.sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li:hover > a { color: #b61F29 important!; }

It did not make any changes.

Thanks for the hint with the order. I will check and adjust that.

Thanks,
Isabelle

Berufskolleg für Technik und Gestaltung Asked this
3 years ago

Thanks, Pavel.

Log in to reply.