Support » Theme: Storefront » Storefront Sub navigation menu Text Color and hove color

  • Anti.biz

    (@antibiz)


    Im trying to get the text color to be white and hover color to be silver. Have no idea what code to put in and theres nothing on the internet. I have powerpack but it doesnt seem to want to change what I want.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Anti.biz

    (@antibiz)

    I found the code to add to additional cs to make the menu black. But when I change the text to white in the power pack it changes the entire menu.

    Im just wanting the sub navigation menu white text with a silver highlight on the buttons on the drop down menu.

    RK

    (@riaanknoetze)

    Hi there,

    For Powerpack questions, the best approach would be to open a support ticket over at https://woocommerce.com/my-account/tickets/

    With that said, to target just the submenu, you’ll need some custom CSS as the Powerpack settings alone won’t be enough. While I’m not 100% sure of the desired outcome, the following custom CSS is a good starting point:

    
    @media screen and (min-width: 768px)
      .main-navigation ul.menu ul.sub-menu, 
      .main-navigation ul.nav-menu ul.children {
        background-color: #000;
      }
    
      .main-navigation ul.menu ul li a, 
      .main-navigation ul.nav-menu ul li a {
        color: #fff;
      }
    }
    

    Hope it helps!

    Anti.biz

    (@antibiz)

    I had to remove this part to get it to work: (Is there a hover color code? I would like gray/silver if possible)

    @media screen and (min-width: 768px) <<<<<<<<<

    .main-navigation ul.menu ul.sub-menu,
    .main-navigation ul.nav-menu ul.children {
    background-color: #000;
    }

    .main-navigation ul.menu ul li a,
    .main-navigation ul.nav-menu ul li a {
    color: #fff;
    }
    }

    • This reply was modified 4 months ago by  Anti.biz.
    RK

    (@riaanknoetze)

    Nice catch on removing those media styles!

    It’s definitely possible to set specific hover colours for those links with some custom CSS. The following should work just fine:

    
    .main-navigation ul.menu ul li a:hover,
    .main-navigation ul.nav-menu ul li a:hover {
      color: #ccc;
    }
    
    Anti.biz

    (@antibiz)

    Okay that hover changes the text hover but not behind the square hover, like the blocks of the actual link like the default does that gray hover.

    Is there a code for that?

    RK

    (@riaanknoetze)

    Sure there is – While I’m not entirely sure which colour you’d like to change that to, the following will change it to red for illustration purposes:

    
    .main-navigation ul.menu ul a:hover, .main-navigation ul.menu ul li.focus, .main-navigation ul.menu ul li:hover>a, .main-navigation ul.nav-menu ul a:hover, .main-navigation ul.nav-menu ul li.focus, .main-navigation ul.nav-menu ul li:hover>a {
      background: #ff0000;
    }
    

    On the front-end, that’ll look as follows:


    Link to image: https://cld.wthms.co/YU8EqZ

    Okay I am going to test the code, but when I used your other code it broke the menu on the mobile version. As in it wouldnt make a drop down menu appear.

    Combining these two codes doesnt give me the hover color. Im trying to get a black menu, with white text, with a gray/silver hover color (not on the text but the blocks).

    This code gives me the black menu with white text, but the hover color doesnt work.

    .main-navigation ul.menu ul.sub-menu,
    .main-navigation ul.nav-menu ul.children {
    background-color: #000;
    }

    .main-navigation ul.menu ul li a,
    .main-navigation ul.nav-menu ul li a {
    color: #fff;
    }
    }
    .main-navigation ul.menu ul a:hover, .main-navigation ul.menu ul li.focus, .main-navigation ul.menu ul li:hover>a, .main-navigation ul.nav-menu ul a:hover, .main-navigation ul.nav-menu ul li.focus, .main-navigation ul.nav-menu ul li:hover>a {
    background: #ff0000;
    }

    Hi @antibiz,

    I think this CSS can help. 🙂

    
    /** Make menu hover background black **/
    .main-navigation ul.menu ul.sub-menu {
      background-color: rgb(0, 0, 0);
    }
    
    /** Make sub-menu text & hover white **/
    .sub-menu a,
    .nav-menu .sub-menu a:hover {
        color: #fff !important;
    }
    
    /** Make sub-menu background hover background silver **/
    .sub-menu li.menu-item:hover {
        background: silver;
    }
    
    

    BEFORE:
    BEFORE
    Link to image: https://cld.wthms.co/GjeBNS

    AFTER:
    AFTER
    Link to image: https://cld.wthms.co/yCeuDH

    • This reply was modified 3 months, 1 week ago by  ryanr14.
    • This reply was modified 3 months, 1 week ago by  ryanr14.
Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.