Mainmenu – Color

Posted in: Newsmag
Post count: 6
eox
#29022
Nov 29, 2014 at 2:00 am

Im surprised that theme like NewsMag dont have menu colors 🙂

How to make menu color (different) for each item?

I try in custom css this, but no results

#menu-item-11905 {
background:#2d2d2d !important;
color: black !important;
}

li#menu-item-11905 {
background:#2d2d2d !important;
color: black !important;
}

Thanks in adnvance

Post count: 780
Radu
#29057
Nov 29, 2014 at 1:18 pm

Hi,

try this

to color an item:
.menu-item-261 > a {
background-color:red;
}

to color an item on hover:
.menu-item-261 > a:hover {
background-color:#FF38D0 !important;
color:white !important;
}

.menu-item-261.sfHover > a {
background-color:#FF38D0 !important;
color:white !important;
}

to color the mega menu of an item on hover:
.menu-item-261 .sub-menu li {
background-color:#FF38D0 !important;
}

Post count: 6
eox
#29097
Nov 29, 2014 at 7:09 pm

It`s working on SUBmenu and hover MAIN (picture 1), how to change active MAINmenu item (picture 2 – from white to color I want)?

MAIN - SUB

Another problem with your code is: when the homepage is active menu, colors of other items are DEFAULT (black), not as I definite in custom css (theme panel) …

Thanks in advance.

Post count: 3343
Marius
#29228
Dec 1, 2014 at 11:56 am

Hi,

When an intem from menu is active have a selector like: current-menu-ancestor

Use it to give a color on that to like your item menu selector + current-menu-ancestor something like:

.menu-item-261.current-menu-ancestor {
my css
}

Hope this help!
Thanks for the message!

Post count: 6
eox
#29705
Dec 4, 2014 at 9:20 pm

Solved ! If someone had a same problem, example of colored menu bellow:

.menu-item-MENU_ID {
border-bottom: 4px solid #B5A594;
}

.menu-item-MENU_ID > after {
background-color:#B5A594;
}

.menu-item-MENU_ID > a:hover {
background-color:#B5A594 !important;
color:white !important;
}

.menu-item-MENU_ID.sfHover > a {
background-color:#B5A594 !important;
color:white !important;
}
.menu-item-MENU_ID .sub-menu li {
background-color:#B5A594 !important;
}

.menu-item-MENU_ID .current-menu-item li {
background-color:#B5A594;
}

.menu-item-MENU_ID.current-menu-item{
background-color:#B5A594 !important;
color:white !important;
}

.menu-item-MENU_ID .current-menu-item > a {
background-color:#B5A594;
}

.menu-item-MENU_ID.sf-menu > a {
background-color:#B5A594 !important;
color:white !important;
}

  • This reply was modified 11 years by eox.
Post count: 6600
Lucian
#29752
Dec 5, 2014 at 11:20 am

Thanks for sharing!

Viewing 6 posts - 1 through 6 (of 6 total)
The forum ‘Newsmag’ is closed to new topics and replies.