COMPACT SEARCH BAR WIDTH ISSUE

[cgoldParticipant]

Hi Guys,

I have added the shortcode to our menu which uses Shivnav plugin.

All looks good however the search box does get fully expanded when you click on it. It is set to 100%

Screenshots are attached.

Thanks
Colin

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi Colin,

It looks like that the container element has an automatic width set, so it expands to a minimum value. Instead of percentage values, try using pixel values, that will do the trick.

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

[cgoldParticipant]

Hi Ernest

That worked.

I have another question.

Is this the correct class name to target the h3 title of the verticle dropdown

div.asp_r.asp_r_1 .results .item .asp_content h3

Thanks
Colin

[Ernest MarcinkoKeymaster]

Hi Colin,

Yes, that seems correct to me.

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

[cgoldParticipant]

Hi Ernest

What would be the best way to show all results for two queries below

Smart watches
Smartwatches

Currently, search results are displayed separately for both ways of writing this word.

Thanks
Colin

[Ernest MarcinkoKeymaster]

Hi Colin,

Well, probably using the additional keywords feature is a good way. You can add these keywords to the items where they are missing.

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

[cgoldParticipant]

Hi Ernest,

I have another issue.

For mobile, it appears Ajax Seach Pro is adding white space under our menu header. How can we remove this? Have attached screenshot.

Also, How can we limit the amount of posts showing on mobile compared to desktop? We only want to show 5 posts on mobile in the dropdown after you search. Screenshot attached.

Thanks
Colin

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

I am not sure if you resolved the white space issue, but it looks okay to me at the moment: https://i.imgur.com/WbYIVr6.png
Let me know if it happens on a specific device.

To resolve the height issue on mobile devices, try this custom CSS:

@media only screen and (max-width: 480px) {
    .asp_r .results {
        max-height: 300px !important;
    }
}

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

[cgoldParticipant]

Hi Ernest

This fix this issue…thanks

I have one more question for now.

When you enable autocomplete on mobile the autocomplete text sits behind the written text and is hard to read the text

I have attached a screenshot for your reference.

Thanks
Colin

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

It looks like maybe a 1px misalignment for some reason. Try this custom CSS rule, it should align it 1px lower:

@media only screen and (max-width: 480px) {
   div.asp_m.asp_m_1 .probox .proinput input.autocomplete {
       margin-top: -33px !important;
   }
}

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

[cgoldParticipant]

Hi Ernets,

Thanks for your help all looks great.

last things I need to ask is how to make the settings menu icon the same size as the search box.

Screenshot attached.

Thanks
Colin

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi Colin,

It looks like it’s only a black border/box shadow, check if the border and the box shadow of the settings icon is set to none: https://i.imgur.com/5ZKhpSV.png
Those should do the trick. If not, then use this custom CSS:

.prosettings {
    background: white  !important;
}

.prosettings svg {
    fill: black !important;
}

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

[cgoldParticipant]

Thanks Ernest

I wanted to ask you about the option of loading the css files aync.

Do you think its required as we used Cloudflare Rocket Loader.

Thanks
Colin

[Ernest MarcinkoKeymaster]

Hi Colin,

I don’t think it’s neccessary if you are using the Rocket Loader, it should take care of that.

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

[Author]

Posts