Archived topic
Mobile Menu Styling
7 replies · Started by Austin on August 9, 2021
Hi,
David was nice enough to supply the following code yesterday to style my mobile menu. I have been trying to add the following with no luck:
- Is it possible to change the header color to (#000000) when the mobile menu is activated via the toggle?
- I have tried to insert a text placeholder into the search box, but it keeps appearing in the header instead
- I can't seem to make the sub-menu color the same as parent menu (#000000)
Thanks
`@media(max-width: 800px) {
.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav>ul {
display: block;
}
#masthead #site-navigation {
height: auto;
max-height: 0;
overflow: hidden;
transition: none;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
margin-top: 0;
background-color: #000000;
z-index: 1000;
pointer-events: none;
}
/* adjust positon when admin bar is present */
.admin-bar #masthead #site-navigation {
top: 90px;
}
#masthead #site-navigation.toggled {
max-height: 1200px;
pointer-events: initial;
overflow-y: scroll;
}
.mobile-menu-open body {
overflow: hidden !important;
}
.main-navigation .main-nav > ul > li {
border-bottom: 1px solid #333333;
}
/* Mobile search field */
.mobile-menu-open .navigation-search {
position: static;
pointer-events: initial;
visibility: visible;
opacity: 1;
padding: 15px 20px 20px 20px;
}
.main-navigation .navigation-search input[type="search"] {
border: 1px solid #333333;
border-radius: 8px;
background-color: #333333;
height: 35px;
}
.mobile-menu-open .search-item {
opacity: 0;
pointer-events: none;
}
}
Hi there,
try this CSS for the color changes:
.mobile-menu-open #masthead,
.mobile-menu-open .main-navigation .main-nav ul ul li > a {
background-color: #000;
}For the search placeholder, you should use the snippet provided here:
https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder
Its output is within the search Input field, so it shouldn't display anywhere else.
If that code is causing a problem, add it so i can take a look.
Got it. Thanks David. Added Code Snippets and got the placeholder working. Appreciate the help again.
Glad to hear that!
Hey David,
One more question, the placeholder for the search is in place, but using the following css I cannot seem to change the color of the "placeholder" text. This only changes the color of the text when starting to type.
What should I change to edit the color of the "placeholder" text that is seen before typing?
.main-navigation .navigation-search input[placeholder="Search keyword or location"] {
color: #6e6e73;
}
Thanks
This should work:
.navigation-search input[type="search"]::placeholder {
color: #000000;
}Got it. Thanks Leo
No problem :)
