Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Menu Plus colour by CSS

Home Forums Support [Resolved] Menu Plus colour by CSS

Home Forums Support Menu Plus colour by CSS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #187358
    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

    #187376
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #187458
    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 5 years, 7 months ago by Joanne Smith.
    #187505
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.