Search results offset to the right

[Daniel]

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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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.

[David]

For long menu structures you’re better off using the Off Canvas Panel:

https://docs.generatepress.com/article/off-canvas-panel-overview/

Or try this CSS:

.main-navigation.toggled .main-nav>ul {
    max-height: calc(100vh - 60px);
    overflow-y: scroll;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

Regards

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts