Archived topic
Changing color of mobile header, menu button, and search button.
6 replies · Started by Justin on November 8, 2018
I recently posted in an old thread, but I'm starting a new one here.
I'm trying to make my mobile header a different color than the desktop site colors. I figured out how to change that, and got the background and menu button to change color with the following CSS:
@media (max-width: 768px) {
.mobile-header-navigation {
background-color: #ffffff;
}
button.menu-toggle,
button.menu-toggle:hover,
button.menu-toggle:focus {
color: #00509e;
}
}But I have tried several ways to target the search button, unsuccessfully. It remains as a white button on a white background on mobile.
Also, you'll notice that the search button is on top of the menu button. I tried following the directions here https://docs.generatepress.com/article/centering-logo-mobile-header/ to get the logo in the middle with a button on either side, but that seems to have failed as well. I think that will be easier to fix once we can see both buttons though!
Thanks in advance.
I never did get a response to this...
Hi there,
Sorry not sure how we missed this!!
Have you disabled the navigation search? Can you re-activate again so we can see the issue?
Thanks!
I've re-enable the search button, it appears to the left of the menu button, but is invisible right now.
I'm trying to get menu button on left, search on right, with the logo in the middle.
Give this CSS a shot:
.main-navigation .mobile-bar-items a, .main-navigation .mobile-bar-items a:hover {
color: #000;
}
body .mobile-header-navigation {
display: flex !important;
}
.mobile-header-logo #mobile-header .menu-toggle {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.mobile-header-logo #mobile-header .mobile-bar-items {
margin-left: auto;
}Took some minor tweaking, but it's exactly how I wanted it. Thanks!
Glad I could help :)
