Site logo

Archived topic

Search results offset to the right

7 replies · Started by Daniel on January 31, 2020

Viewing posts 1–8 of 8

Hi

I use the Instant Search+ plugin for the searching of products on my site. I am having an issue with the results at the moment. I have it set up to mobile optimized, this means when somebody clicks into the search area InstantSearch+ opens up a full screen search area (overriding the theme). This worked initially, but now for some reason the result as getting pushed to the right instead of filling up the screen centrally.

I have asked InstantSearch+ team to look into this, they are suggesting it maybe an issue with the theme though.

I am currently running this all on a test site

spotontest.wpengine.com

Do you think somebody can take a look and see if there is a fix to this issue via the theme? Please note this issue is only on mobile devices, I am having the same problem on Andriod and Iphone.

Many thanks

Hi there,

Add this CSS to remove the indentation which is coming from the theme styles. As the plugin is generating a UL LI list may be worth the author considering this in there CSS - GP isn't the only theme that uses margins to indent the UL lists.

.ui-autocomplete {
    margin-left: 0;
    margin-bottom: 0;
}

And i noticed some sideways scroll - to fix that you can add this CSS - again something the plugin author may want to consider including in their styles.

li#acp_footer_acp div {
    box-sizing: border-box;
}

Fantastic, this has worked a treat.

I have just noticed another issue on mobile devices. The sticky menu wont scroll when I open a drop down with a long list of headings.

I am sorry for the questions, I admit my coding level is very low and my css is extremely limited.

Thanks for the super fast response.

Hi, I am not sure if can reply to this after such a long time.

I was wondering if you can help me with editing the search in the navigation bar? I cannot find anywhere to edit this, I would like to make it stand out a little more and possibly add some text, eg, search your car here.

Any thoughts will be gratefully received.
Thank you

Hi there,

try this CSS to move the search field below the Navigation and give it a border.

.navigation-search.nav-search-active {
    top: 100%;
    border: 2px solid #000;
    box-sizing: border-box;
}

You can change its background and text color in Customizer > Colors > Primary Navigation.

To add a placeholder text you will need to use the PHP snippet provided here:

https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

This article explains adding PHP:
https://docs.generatepress.com/article/adding-php/

Thank you for the advice I will see how this works.

Regards

You're welcome

This archived topic is closed to new replies.