Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Menu bar and link active/hover colors

Featured Lock Resolved Issue
Hello, I followed the documentation steps (https://www.joomshaper.com/documentation/joomla-templates/macro#menu-colors) but some errors appeared.

Hamburguer menu don´t swap color and on the internal pages, such as "contact us", the menu continued black.

I made my changes in css as below, but I could not find where to change the color of the hover / active menu.

In the #offcanvas menu I am having problem with delay in color transition.

Test site link: http://gede.com.br/_bypastor/

My code:


#sp-header { background-color: rgba(255,255,255,0.8);}
.sp-megamenu-parent >li >a { color: black; }
.macro-top-search .icon-top-wrapper { color: black; }
#offcanvas-toggler { color: black; }

.has-sub-image #sp-header.menu-fixed,
.has-slideshow #sp-header.menu-fixed,
#sp-header.menu-fixed {
background-color: rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}
.has-slideshow #offcanvas-toggler,
.has-sub-image #offcanvas-toggler,
.has-slideshow .icon-top-wrapper,
.has-sub-image .icon-top-wrapper {
color: #fff;
}

header.menu-fixed .sp-megamenu-parent > li > a { color: black !important; }
header.menu-fixed .macro-top-search .icon-top-wrapper { color: black; }
header.menu-fixed #offcanvas-toggler { color: black; }

5 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
because on subpages you don't have header.
In that case use only this:

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

to set basic color for menu items.
And this for [=] only


.has-sub-image #sp-header.menu-fixed #offcanvas-toggler > i, .has-slideshow #sp-header.menu-fixed #offcanvas-toggler > i, #sp-header.menu-fixed #offcanvas-toggler > i { color: RED; }


I will check manual and update

Alexandre

More than a month ago #Permalink
Paul Frankowski,
Is there a line in the hover and also in active menu, where do I change the color of this line?

Paul Frankowski - Staff

More than a month ago #Permalink
It depends what template you have there?
It can be based for example on border-bottom ...

Alexandre

More than a month ago #Permalink
It depends what template you have there?
It can be based for example on border-bottom ...


We are talking about the Macro template. I put the site link in the first question, you can see that when the menu background is white, the links turn black, but I'm not able to change the border-bottom color

Paul Frankowski - Staff

More than a month ago #Permalink
Active Menu item - color of line below:

.sp-megamenu-parent > li > a::before {
background-color: red; }


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 133
Sifat

Sifat

Total Accepted Answers: 88
Toufiq

Toufiq

Total Accepted Answers: 41
Pavel

Pavel

Total Accepted Answers: 7
Al Mamun

Al Mamun

Total Accepted Answers: 3

114

Templates

292469

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us