color nav menu

Home › Forums › Support › color nav menu

patje8
Posted 6 years, 5 months ago

I’m want to change the color for the active link in the nav menu in the template wt_factory.
Where can I do this?

Brian
Posted 6 years, 5 months ago

Hi there,
Hover and active color are assigned to main color, if you wish to change the color, simply add

.sp-megamenu-parent >li:hover>a {
  color: red !important;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item >a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a,
.sp-megamenu-parent >li.active>a {
  background: red !important;
}

into custom.css file (located at joomla/templates/template_name/css/custom.css)
replace red with your color style

patje8
Posted 6 years, 5 months ago

This is for the main menu but I want to change de the color for the rigt menu.

I have changed it to

.sp-module-content >li:hover>a {
  color: red !important;
}
.sp-module-content .nav menu li >a:hover,
.sp-module-content .nav menu li.active>a,
.sp-module-content >li.active>a {
  background: red !important;
}

but it doesn’t work.

Brian
Posted 6 years, 5 months ago

Could you please provide your page with Right menu so I can take a look on it?

patje8
Posted 6 years, 5 months ago
This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.
Brian
Posted 6 years, 5 months ago

Here the code

#sp-right .sp-module-content .nav.menu li:hover a,
#sp-right .sp-module-content .nav.menu li.active a,
#sp-right .sp-module-content .nav.menu li.current.active {
  background: red !important;
  color: #fff;
}

If you want to remove the nav icon, simply add


#sp-right .sp-module ul >li >a:before {
  display: none;
}
#sp-right .sp-module ul >li >a {
  padding-left: 10px;
}

You must be logged in to reply to this topic.