Sticky header clone – Search bar only

Hello,

I am using a header design like in the default demo – https://woodmart.xtemos.com/ – with the Browser Categories tab fully opened.

I like the sticky header behavior in the default demo the best and use it like this: Header Settings > Sticky Header > Slide after scrolled down & Sticky header clone

However, I would like to only show the search bar in the sticky header instead of the Header bottom’s cloned menu items.

The Sticky header clone options says the following:
Sticky header will clone elements from the header (logo, menu, search and shopping cart widget) and show them in one line.

I want to eliminate the menu from this and only leave logo, search and shopping cart “widget”) – I’m attaching a screenshot to illustrate this.

If I disable the “Sticky header clone” and make only the Main header sticky (logo – search – cart), the “Browse categories” menu from “Header bottom” closes and the header animation becomes buggy/jumpy when returning to top.

So, in essence, I would like to have the sticky header like in the screenshot (logo – search – cart) but keep the Browse categories menu fully opened and visible when scrolling to top, like in the default demo.

Attachments:

You must be logged in to view attached files.

Hello,

Please enable the “Sticky header clone” option and try to add this code to the functions.php file in your child theme to make header like on your screenshot.

if ( ! function_exists('wd_replace_menu') ) {
    function wd_replace_menu() {
        $template = '
        <div class="whb-sticky-header whb-clone whb-main-header <%wrapperClasses%>">
            <div class="<%cloneClass%>">
                <div class="container">
                    <div class="whb-flex-row whb-general-header-inner">
                        <div class="whb-column whb-col-left whb-visible-lg">
                            <%.site-logo%>
                        </div>
                        <div class="whb-column whb-col-center whb-visible-lg">
                            <%.wd-header-search-form%>
                        </div>
                        <div class="whb-column whb-col-right whb-visible-lg">
                            <%.wd-header-my-account%>
                            <%.wd-header-search:not(.wd-header-search-mobile)%>
	    					<%.wd-header-wishlist%>
                            <%.wd-header-compare%>
                            <%.wd-header-cart%>
                            <%.wd-header-fs-nav%>
                        </div>
                        <%.whb-mobile-left%>
                        <%.whb-mobile-center%>
                        <%.whb-mobile-right%>
                    </div>
                </div>
            </div>
        </div>
        ';

        return $template;
    }

    add_action( 'woodmart_header_clone_template', 'wd_replace_menu', 1000 );
}

Kind Regards

Thank you so much, it’s working beautifully. Exactly what I needed. I think you should consider adding this extended functionality to the Header settings themselves 🙂

The only problem is that the Ajax search is not working (no “live” results) when the footer is sticky…

5-star support! 🙂

Hello,

We will consider your suggestion and maybe add it in our future updates.

Let us know if there’s anything else we can do for you! You can always reach us at any time.

We wish you all the best

Kind Regards

[Author]

Posts