As you can see in the top of the image, that’s why I need this offset.
Thank you!
I hope you are well today and thank you for your question.
Now this option is deactivated because this style issue.
Could you please temporarily enable that option on your website tomorrow so that I can help you?
Best regards,
Sorry about the delay on my response.
It’s activated right now.
Thank you in advance!
You can achieve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings
.is-menu-wrapper {
top: 90px !important;
}
Like a charm!
One more… to set it in the center of the screen?
I tried
.is-menu-wrapper {
margin:0 auto !important;
top: 90px !important;
}
and
.is-menu-wrapper {
margin:0 auto;
top: 90px !important;
}
Thank you!
To center align it, please use below custom CSS code along with above-shared CSS code.
div.is-menu-wrapper .is-menu {
float: none;
margin: 0 auto;
display: table;
}
You’re THE man! Thanks a lot!
You are most welcome, I’m glad I was able to help you with this matter. There is no obligation but by your kind words I wonder if I could trouble you to leave a review based on this experience here:
https://wordpress.org/support/plugin/add-search-to-menu/reviews/
I’d really appreciate that. 🙂
And if I can be of any further assistance please don’t hesitate to ask.
Hi… it’s me again. on mobile and maximized navigators, the search is looking very nice.
But in not-maximized (restored?) mavigators, the search remains at the bottom of the menu and does not shows like on mobile. You can see here that is not under the header. And when I open de Main Menu, there it is, all the way on the bottom.
Haw can I do (with your help and/or instructions) set the search over the menu bar for navigators not-maximized. I’ve seen this when visualizing the website on an ipad and a samsung android tablet.
Once again, thanks in advance.
Sorry, FYI, my actual CSS code is:
@media only screen and (min-width:1025px){
.main-navigation li.is-menu {
float: right;
}
}
@media only screen and (max-width:1024px){
.is-menu-wrapper {
top: 90px !important;
}
div.is-menu-wrapper .is-menu {
float: none;
margin: 0 auto;
display: table;
}
}
When you test it by resizing the browser or visualizing the website on an ipad and a samsung android tablet then you have to refresh the page to see it in the proper position same as mobile version.
I thought so. You can give it a try (www.recorreitalia.com), actually the mobile search option is activated. On mobile works fine, but resizing and reloading on navigators, doesn’t work. It stays at the botom of the menú.
I am not sure which navigator you are using and what output you are getting so could you please share the screenshot of it?
Firefox & Chrome on desktop PC, Chrome on Tablet. Default browser on iPad (not mine, is property of my client, so i think it would be Safari).
This is what happens when resizing and reloading. *Link to image*
Please try enabling the This site uses Cache option in the plugin settings as displayed in the below screenshot.
https://ivorysearch.com/wp-content/uploads/2018/12/header-search-form-cache.png
