Search bar compatibility issue – it's not appearing as expected

[kulendr5Participant]

I purchased your product today, however I am having trouble getting the search created to display correctly on the front-end of the site.

I’ve already created a ‘search’ – please check how it looks on the back-end and then how it shows up in desktop and mobile mode in the front-end.

Please help! I love your plugin and would like to get this up and running asap.

Sujee

[Ernest MarcinkoKeymaster]

Hi Sujee,

I suppose you are reffering to the top search bar (it was not active when I checked)?

The issue is, that the wrapper on the top is set to display as a table, and the columns are as table-cells. This layout can be problematic to adjust correctly. Adding the search bar there increased it’s height and the columns shifted upwards.

I have added the following custom CSS to resolve it:

div#menu-site-search {
    max-height: 0;
    margin-top: -12px;
}

div#menu-site-search .asp-try a {
    color: white !important;
}

Please keep in mind, that this was not an issue with the plugin directly, so I cannot guarantee these CSS rules will work in all cases, as these apply to the theme elements.

Now it looks like this on my end: https://i.imgur.com/pEknbIj.png
I took the original theme search to sample: https://i.imgur.com/ALamYBd.png

The alignment should be correct now.

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

[kulendr5Participant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi,

It looks like the styling is missing there. Make sure to clear your site cache – especially the minify/asset cache, as well as your browser cache. Once it is cleared, it should appear normally again.

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

[Author]

Posts