[Support request] Search results offset to the right

Home Forums Support Search results offset to the right

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1150094
    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

    #1150144
    David
    Staff
    Customer Support

    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;
    }
    #1150154
    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.

    #1150168
    David
    Staff
    Customer Support

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

    #1437883
    David
    Staff
    Customer Support

    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/

    #1438487
    Daniel

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

    Regards

    #1438897
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.