[Resolved] Menu Plus colour by CSS

[Joanne Smith]

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

[Tom]

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 🙂

[Joanne Smith]

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;
}

• This reply was modified 8 years ago by Joanne Smith.

[Tom]

Glad I could help 🙂

[Author]

Posts