Archived topic
Menu Plus colour by CSS
3 replies · Started by Joanne Smith on April 16, 2016
I was also wondering — how I would COLOUR the slide out navigation ONLY on a phone —
If I colour it on the main site — yes — it does change on the phone BUT I what it to have a white background with red text on roll over on the main site and the on the phone the side bar has a red background on roll over with white text on roll over — is that possible ? ?
IN other words -- is there a way to colour the slide out menu plus separate to the PC version > ?? I have looked in the colour area and can't see this a separate feature -- so is there any CSS that can overide the default navigation colours for Menu Plus
maybe you could add it to a future update of the site plugins ?
J
It's not possible with options, but it is with CSS:
@media (max-width: 768px) {
.main-navigation.slideout-navigation .main-nav ul li a {
background-color: #222;
color: #FFF;
}
/* on hover */
.main-navigation.slideout-navigation .main-nav ul li a:hover,
.main-navigation.slideout-navigation .main-nav ul li.sfHover a {
background-color: #222;
color: #FFF;
}
/* current menu item */
.main-navigation.slideout-navigation .main-nav ul .current-menu-item > a {
background-color: #222;
color: #FFF;
}
}Hope this helps :)
Great thanks - I can play around with the colours myself one I have the target CSS code
@charset "utf-8";
/* CSS Document */
.nav-float-right .main-navigation.slideout-navigation .main-nav ul li a {
line-height: 30px;
}
@media (max-width: 768px) {
.main-navigation.slideout-navigation .main-nav ul li a {
background-color: #222;
color: #FFF;
}
/* on hover */
.main-navigation.slideout-navigation .main-nav ul li a:hover,
.main-navigation.slideout-navigation .main-nav ul li.sfHover a {
background-color: #F00;
color: #FFF;
}
/* current menu item */
.main-navigation.slideout-navigation .main-nav ul .current-menu-item > a {
background-color: #222;
color: #FFF;
}
Glad I could help :)