Archived topic
Create "Search" in Menu Options
3 replies · Started by Lilly on April 26, 2022
I'd like to add a search function somewhere at the top of my mobile site. So far, all I see is my Primary Drop-Down Menu. How can I make the search functionality accessible to my users quickly on the mobile site?
Hi Lilly,
One approach is to remove this code in Appearance > Customize > Additional CSS to make the same search bar you already have on Desktop, appear on mobile as well:
/* GeneratePress Site CSS */ /* hide the topbar on mobile devices */
@media (max-width: 768px) {
.top-bar {
display: none;
}
}Another approach to do this is through Enabling Navigation Search in Appearance > Customize > Layout > Primary Navigation.
For example: https://share.getcloudapp.com/12ugdmA9
Then to hide the Search icon in tablet and desktop, kindly add this CSS in Appearance > Customize > Addtional CSS:
@media (min-width: 769px) {
.main-navigation .search-item {
display: none;
}
}Hope this helps! :)
Got it! Thanks so much!
You’re welcome Lilly! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)
