Target Mobile Menu Color

  • Resolved kristenfisher427

    (@kristenfisher427)


    1 year, 6 months ago

    I want the navigation menu links to be white (except in the mobile menu), which I’ve accomplished through this CSS:?

    .primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited {

    color: white;

}

    Unfortunately, this code also affects the menu items in the mobile menu as well. Because the mobile menu has a white background, the menu items become illegible. I’d like to make the mobile menu items black, and I’m not sure how to accomplish this while keeping the non-mobile menu items white. I’ve tried targeting different?CSS classes, but I think my specificity is still too low. Is there a way to keep the non-mobile menu items white while making the mobile menu items black?

    Any recommendations are greatly appreciated! Thank you so much! ??

Viewing 3 replies - 1 through 3 (of 3 total)

  • Unfortunately, this code also affects the menu items in the mobile menu as well. Because the mobile menu has a white background, the menu items become illegible.

    Hi @kristenfisher427 you can use the @media query rule to have the CSS load if certain conditions are true, for example, the code below will be implemented if the screen size is larger than 954px in width. 

    @media only screen and (min-width: 954px){

enter your code here

}

    You can use the code below to make the menu white on large screens only. You can adjust the screen width to your preference

    @media only screen and (min-width: 954px) 
{
.primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited {

    color: white;
}
}
    Thread Starter kristenfisher427

    (@kristenfisher427)

    Hi @thelmachido,

    Thank you so much for your response! I tried the code in my theme, and it worked perfectly. ?? I appreciate it!

    -Kristen

    Hi @kristenfisher427 thank you for the update, I am glad it worked.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Target Mobile Menu Color’ is closed to new replies.