Mobile Menu Color Change

  • Hi,
    My website is https://www.cheshireimpressions.co.uk. If you look at the website in a laptop/desktop computer it looks fine. I checked it in a mobile phone (an iphone) but the menu bar turns into a dropdown menu and it is red in color.
    My question is: How can I change the red menu dropdown into pink?

    Thank you in advance.

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

  • try adding this css. Add it to your custom css, if our theme has that, or to your child theme’s ‘style.css’ file.

    @media (max-width: 1024px) {
    .main-navigation-responsive ul li a {
        border-bottom: 1px solid #fff; /* change here for border color */
        color: #fff; /* change here for text color */
    }
    .main-navigation-responsive ul li.current-menu-item,
    .main-navigation-responsive ul li:hover {
        background: #F657A4; /* change here for current page/hover color */
    }
    .main-navigation-responsive ul li {
        background: #ED92BD; /* change here for menu item background color */
    }
}

    i added comments in the code so you know what each line does. I also made the colors match your existing menu on your desktop site. A quick way to see the mobile menu in action is to resize your browser window to a width of a phone. you will see it change when its small enough.

    Theme Author Access Keys

    (@access-keys)

    Hi cherylking,
    Did the css code provided by Mr Case worked or you. Please let us know if you need further assistance with the issue.

    And thanks to Mr Case for stopping by and having look at the query.
    Thanks,

    I came across this post and tried to use Mr Case’s code and unfortunately it didn’t seem to work. My site can be seen here. Any insight is appreciated!

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