- This topic has 8 replies, 2 voices, and was last updated 4 years, 6 months ago by
.
You must be logged in to create new topic or reply to the topic. Click To Login
- Posts
Hi!
I love this plugin and so far it proves to be helpful but I would like to position the search bar vertically next to the magnifying glass, not under it. I managed to achieve this with some CSS positioning but it turned out to be different on different pages and devices.
Could you please help me? Thank you!
Website: http://www.thecodinglawyer.com
I hope you are well today and thank you for your question.
I visited your shared website but it displays fine for me as shown in the attached screenshot.
Could you please tell me exactly where I can see the problem so that I can help you?
Best regards,
Ivory Search SupportI hope you are well today and thank you for your question.
I visited your shared website but it displays fine for me as shown in the attached screenshot.
Could you please tell me exactly where I can see the problem so that I can help you?
Best regards, Ivory Search SupportThank you for the reply and apologies for the late follow-up. The issue I have is that I would like the search bar to appear on the right from the icon, not below it.
Thank you!
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
li.is-menu.dropdown form { top: 6px; right: auto; left: 80px; }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
li.is-menu.dropdown form { top: 6px; right: auto; left: 80px; }I have one additional question. How would I make the
.is-form-style input.is-search-input {appear upon hovering on the search-icon instead of clicking on it? I had no luck finding this in the inspector.Thanks a lot
Awesome, thank you! That did it.
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/?filter=5
Iād really appreciate that. š
And if I can be of any further assistance please don’t hesitate to ask.
I have one additional question. How would I make the .is-form-style input.is-search-input { appear upon hovering on the search-icon instead of clicking on it? I had no luck finding this in the inspector.
You have to use below custom CSS code to achieve it.
ul.primary-menu > li.is-menu:hover .is-search-form, ul.primary-menu > li.is-menu:hover .search-close, ul.primary-menu > li.is-menu .is-search-form:hover, ul.primary-menu > li.is-menu .search-close:hover { display: block !important; }Awesome, that did it again. Thank you! I have just now left a review š
One last question is regarding the !important property. I have had troubles with editing some elements, such as the one below:
input.is-search-input { border-radius: 25px !important; }And I wonder what prevents my code from being executed without ‘important’ , as I would like to generally avoid using ‘!important!”
Thanks!
The !important is a part of CSS specificity that is used to increase the priority of the CSS property.
You will find more information about the CSS specificity on the below pages.
https://www.w3schools.com/css/css_specificity.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/SpecificityIn your case, If you want to overwrite the above-shared CSS code then you can do it as below.
body input.is-search-input { border-radius: 25px !important; }
You must be logged in to create new topic or reply to the topic. Click To Login