Do not hide top menu when use search icon

[Jorge]

Hi, I´d like to know how can I do so, when use the search icon on the top menu, not dissapear the items of the menu.

[Leo]

Hi there,

Try changing the navigation search color under Customizer > Colors > Primary Navigation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jorge]

Thanks. I think that that solution is not enough, becasue althougn you change the background color of the search and set as the main menu, when you write on the search, your writting will be mixtured sith over the menu items and is imposssible to read anything.

I´ve made this solution that inserts a new space between the name of the site and the mani menu and when you click on the search icon, opens a line to write.

Please, if you think that there is a better way to srite a search and not hidding the menu items o wrote over them, please let me know. In the meanwhile test this css code and let me know.
Thanks:

(Frist of all, I´ve set the background search color in the settings that you told me:
Customizer > Colors > Primary Navigation.

@media (min-width: 768px){
.navigation-search {
position: inherit !important;
background-color: #00000000 !important;
width: 30% !important;
margin-left: 70% !important;
height: 30px !important;
border-bottom: 1px solid white !important;
}
.navigation-search .search-field{
border-bottom: 1px solid white !important;
}
.navigation-search input{
height: auto !important;
}
}

[Leo]

Awesome.

Thanks for sharing!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jorge]

Thanks to you

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jorge]

Hi, Leo. could you please take a look at that code, si if possible setting the search under the menu and not between the logo and the menu?

I am trying but I can not find the way.

Thanks anyway

[David]

Hi there,

if you remove the position: inherit !important; property from your CSS and add top: 100%; it will push the search field below the navigation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jorge]

Great, great, great. So, simply!!!
David, I´ve not resolved yet the thing about Ajax in the filter plugin (I hope you know about what I´m talking about).
As soon I know something bout the developer I´çll let you know.

Thanks

[David]

You’re welcome
Yes – let us know what the ajax filter plugin author says.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts