changing mobile menu font color / opacity

  • Resolved p4rker

    (@p4rker)


    7 years, 2 months ago

    Hi,
    I am almost sure that I am missing the obvious – but I do not seem to be able to change the color of the mobile menu font to save my life (even though changing the size, weight or other features is no problem.
    This is the CSS I am trying:

    @media all and (max-width: 767px) {
	.main-navigation {
    color: rgba(0, 0, 0, 0.5)!important;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
}

    The color is not changing at all…
    THANK YOU!

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

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

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, you have to target the “a” elements like this.

    @media screen and (max-width: 768px) {
  .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a 
/*your css declarations here*/
}
    Thread Starter p4rker

    (@p4rker)

    Thanks a lot!
    works like a charme… here is the complete css, in cose someone is trying to achieve the same:

    /*font color menu small screens*/
@media screen and (max-width: 768px) {
  .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a 
{
color: rgba(0, 0, 0, 0.5)!important;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;	
}
}
    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Awesome, and you are welcome, and thanks for posting the full solution.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘changing mobile menu font color / opacity’ is closed to new replies.