Archived topic
Search alignment
7 replies · Started by Raielene on June 10, 2019
I'm working on a site and have made the navigation a little taller than usual. I added the search to the main navigation but it's small and stuck to the top of the horizontal bar. If I try to use CSS to move it down, it looks great on desktop but is too low on mobile. Obviously, I want it in the middle for both.
Speaking of mobile... even without this CSS hack, there's a second bar that appears in the mobile menu. The search is there to the right, but it's also in another bar below my menu items. ??
Hi there,
What happens if you set GP's menu item height the same as mega menu height?
https://docs.generatepress.com/article/menu-item-height-width/
It's currently at 60px.
Hmm it's weird that second search is still there.
Can you clear and disable any caching plugin you might have activated?
GP and Max Mega Menu are both already set to 60px.
I've purged all caches and disabled LiteSpeed. Second search is still there.
🤷♀️
For sure deactivated. Can you check again?
Try adding this CSS:
.main-navigation li.search-item {
line-height: 60px;
}And this should hide the second one on mobile:
@media (max-width: 768px) {
.main-navigation li.search-item {
display: none;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Perfect! Thanks Leo!
No problem :)
