bug fix request

[dehavenParticipant]

I spent all evening on this problem. Either I add the search to the Primary Header as a widget, in which case the magnifier displays correctly but the width of the search box is narrow and cannot be changed or I add it as Custom Menu Text/HTML as “[wd_asp id=2]” and the magnifier glass display too far down. What’s weird is the the “Search” button text displays okay.

I’ve tried every conceivable user work around for this except changing themes, which is not an option for me.

[Ernest MarcinkoKeymaster]

Hi!

The magnifier issue is simply because of an inherited CSS rule from the theme, which sets the vertical alignment of most elements to ‘baseline’.

Using this custom CSS will override this for the search box and fix it immediately:

.innericon,
.innericon svg {
    vertical-align: top !important;
}

The width of the search bar is by default set to 100%, which means, that it fully follows it’s container width. If however the container width is narrow, the search bar could get narrow as well. There are two ways to resolve it:
– Either you change the search width to a fixed, pixel value under the Theme Options -> Overall Box layout panel like so: https://i.imgur.com/j4OWKOa.png
– Or you can define a minimum width via custom CSS, like so:

.asp_m.asp_non_compact {
    min-width: 240px !important;
}

PS: You can apply the css codes in your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

I hope this helps 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts