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.
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!
