Archived topic
Disappearing search box
9 replies · Started by Silver on October 8, 2018
Whenever I click the search icon, the search box is location somewhere in the middle of the page and is completely transparent. Please help.
And also, how can I keep the search icon in the left side of my menu and the menu items on the right? Ideally, I want to set my menu alignment to the right so that I can easily add menu items without affecting the search icon on the left.
P.S. I moved the nav search from primary to secondary menu using the php code provided here.
Hi there,
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Make sure this is the code you are using to move the navigation search:
https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation
Let me know :)
Hi Leo,
Edited my post with the site URL.
Can you double check on the site address?
It says This site can't be reached.
Let me know :)
Sorry about that. Please check again.
And this is the exact PHP code you are using?
https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation
and no other CSS etc?
I can't quite tell as you have caching plugin on.
Yes. I recopied and reconfirmed that it is the same code. I turned off the caching plugin.
Hi there,
This custom CSS is the problem:
.navigation-search {
max-width: 200px;
height: 40px;
bottom: auto;
left: 0px;
top: 100%;
margin-left: 400px;
}Then add this CSS:
.navigation-search input[type="search"]:focus {
color: #fff;
background-color: rgba(63,63,63,0.9);
}Thanks Tom. That fixed it. So I changed the colors and position a bit. But now when I click the close button to when search box is active, nothing is happening.
Try adding this as well:
li.search-item.close-search {
z-index: 50;
}