[Support request] Search bar and page customization

[Dev]

Hello,

Please see the below video link.

https://share.getcloudapp.com/nOuDxddW?collection_id=3nfnMp

I want to make my search page like how we can do that?

More, please see the below image link. Is this shadow, or how can I add that in my header.

https://prnt.sc/wmoo9i

And as we are adding lots of CSS code, will it impact the site speed? What’s the solution?

Please let me know.

[Ying]

Hi Dev,

You’ll need a Ajax Search plugin to achieve live searching effect.

For the box shadow, try this CSS, adjust the number depends on your needs:

.inside-header {
    box-shadow: 5px 7px 6px -2px rgba(0, 0, 0, 0.1);
}

The more CSS you added, relatively the slower your site is. That’s basically inevitable.
I would recommend use site speed testing software/website in order to know what needs to be optimized in your site.

Let me know 🙂

[Dev]

Hello,

The below CSS is not working for mobile view. And for the sticky header as well.

.inside-header {
box-shadow: 5px 7px 6px -2px rgba(0, 0, 0, 0.1);
}

[Ying]

Can you link us to the site in question?

You can use the private information field.

Let me know 🙂

[Dev]

Hello,

Please check the details

[Ying]

Try this CSS instead:

#mobile-header, #sticky-navigation, .site-header {
    box-shadow: 5px 7px 6px -2px rgba(0, 0, 0, 0.1);
    position: relative;
}

[Dev]

Thanks, it worked for me.

[Ying]

Great!

You are welcome 🙂

[Dev]

Hello,

I have installed the ajax search, and I have the shortcode – [wpdreams_ajaxsearchlite]

How and where I have to put this shortcode to replace the secondary menu search bar with the ajax search bar.

[Elvin]

Hi,

Try this PHP snippet:

add_filter( 'generate_navigation_search_output', function() {
    return sprintf(
        '<div class="navigation-search">%s</div>',
        do_shortcode( '[wpdreams_ajaxsearchlite]' )
    );
} );

[Dev]

Hello,

I added u PHP code, but that is activating the double search bar over clicking. It may not get displayed on the desktop, but it clearly shows double search bars on mobile view.

One is your wp default search bar, and the other is of the shortcode.

[Elvin]

Try adding this to remove the second search form.

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_inside_mobile_header', 'generate_navigation_search' , 1 );
});

[Dev]

Hello,

None of the above PHP code is working. See, I want when someone clicks on the search (that is in the secondary menu) then the HERO section I have designed in the elements section, gets open.

For a clear idea, please see the below video.

https://share.getcloudapp.com/5zuAgjjr

Please let me know.

[Dev]

Any update on this issue?

[David]

Hi there,

thats not a function of the Theme. It would require Custom Development which is outside of the scope of this forum.

[Author]

Posts