Staff replied Helix Framework

Menu color and different logo for Website and mobile

Asked by Josef 4 years ago Last activity 4 years ago

I have the latest versions Joomla 4 and Helix Ultimate 2.0.7.

In the menu I used system links for testing and now replace them with pages SPPB. In the template under Presets Menu I have
Text Color to #00233c, Hover Text Color to #fbb900 and Active Text Color to #fbb900.
In the menu is now the white letters on white background.
Which is not optimal for the website.

Second problem same website - logo
The menu still has a white background, the logo has a dark font.
In the template under Basic, the logo has a dark font and under Mobile Logo, the logo has a white font because under the hamburger button the background is dark.

Unfortunately, the display does not work properly here either.

5 replies

Rashida Rahman Staff

4 years ago · edited

Hi there!

Thanks for your query.

I have checked your site and found out the colors are working right though.

And those are not following the color has set as menu heading. So if you want you can use the following code in your custom CSS:

This one for menu item hover color-

.sp-megamenu-parent > li:hover  > a, .sp-megamenu-parent > li:hover > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a {
    color: #fbb900;
}

This one for menu item active color-

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active > span, .sp-megamenu-parent .sp-dropdown li.active.sp-menu-item > a {
    color:  #fbb900;
}

This one for menu item text color-

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    color: #00233c;
}

Hope this helps!

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

Josef Asked this

4 years ago

thanks you - the menu is working now.

BUT The problem with the logos still exists

Josef Asked this

4 years ago

Normal view is ok
https://prnt.sc/PeytQJ9EjUoR

Hamburger button look like this
https://prnt.sc/o9a9d-HC0LIG

and we need this
https://prnt.sc/Z7g6s94AA_Bg

Josef Asked this

4 years ago

there is always the problem with the logos - answer please

Rashida Rahman Staff

4 years ago

Hi,

Thanks for your screenshots. It helped to get the issue better.

Kindly use the following code in your custom CSS:

.offcanvas-menu .logo-image-phone {
    display: block !important;
}
.offcanvas-menu .logo-image {
    display: none !important;
}

Hope this will solve the offcanvas logo issue.

Best Regards