[Resolved] Change text color for hover/click on mobile menu

Home Forums Support [Resolved] Change text color for hover/click on mobile menu

Home Forums Support Change text color for hover/click on mobile menu

  • This topic has 9 replies, 4 voices, and was last updated 2 years ago by Tom.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #893143
    Greg

    I would like to change the text color on my mobile menu when a user hovers or clicks on it. I would like to change it to #0080FF. Right now it is set to black which blends in with the background. I believe the issue is caused because I have my menu floated right on desktop, so it is taking that setting. What is the CSS class to make this change? I figured out how to set the current menu item but not when a user hovers/clicks on it. Thanks for your help!

    #893291
    Leo
    Staff
    Customer Support

    Hi there,

    By default, the mobile menu color should inherit the settings in the customizer (same as desktop).

    It’s currently black because of this CSS you’ve added:

    .mobile-header-sticky #mobile-header.toggled .main-nav>ul {
    	  background: #000;
    }

    Is that actually what you wanted?

    Let me know πŸ™‚

    #893424
    Greg

    I do want the background to be black on the mobile menu (it was white before and you couldn’t see it). I want the text to be a different color when a user hovers/clicks. If you click on a menu item on the mobile menu, you will see that it turns black and blends in with the black background. I want to change this text color. Thanks!

    #893499
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This should help:

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

    Let me know πŸ™‚

    #894247
    Greg

    Hey Tom,

    In this situation, I’m only trying to change my mobile menu. I replaced .main-navigation with .mobile-header-sticky #mobile-header.toggled and it appears to work fine. See the code below. Thanks for your help.

    .mobile-header-sticky #mobile-header.toggled .main-nav ul li:hover > a,
    .mobile-header-sticky #mobile-header.toggled .main-nav ul li:focus > a,
    .mobile-header-sticky #mobile-header.toggled .main-nav ul li.sfHover > a {
    color: #0080FF;
    }

    #894350
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working πŸ™‚

    #949409
    Kelly

    My questions is along the same lines here. Using the code example above, I am trying to get the background color on only the mobile menu to be white and cannot get it to take.

    .mobile-header-sticky #mobile-header.toggled .main-nav>ul {
    	  background: #fff;
    }

    I have my main navigation displayed in the left column of the site which is set to transparent because I have a container background, but when it switches to mobile below the header with the transparency, the body background shows through.

    I’ve spent several hours trying various things to no avail.

    Thanks!

    #949878
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Are you using the mobile header? If so, try this:

    #mobile-header {
        background: #fff;
    }

    Let me know πŸ™‚

    #949939
    Kelly

    That wasn’t it, but did manage to get it to work with this code and a media query:

    @media screen and (max-width: 855px)
    {
    .main-navigation, .main-navigation ul ul {
        background-color: #fff !important;
    }
    }

    The !important is important to get it to take.

    Thanks

    #950163
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad you got it working πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.