Placing Category dropdown menu in sticky header

Hello,
is there any option to place category dropdown menu into sticky header? I use Advanced menu type and it would be ideal to place it instead of logo.
Best Regards

Hello,

We are glad to know that you considered using WoodMart for your web-site. I hope you will be happy with it.

Unfortunately, there is no such ability in our header options yet. We plan to add this function in our 2.0 version of the theme that will be released in a few months.

Kind Regards
Xtemos

Hello,
is it possible in 2.0 to replace the category instead of the logo? category dropdown menu.

and how?

Best Regards

Hi,

Read more information about our new Header Builder functionality in the documentation https://xtemos.com/docs/woodmart/header-builder/woodmart-header-builder/

Regards

Hi,
ok, but that’s not exactly what I need.

I need this ““Slide after scrolled down” with header clone enabled example — https://xtemos.com/docs/woodmart/header-builder/enable-sticky-header-option/” but replace the logo with category. No full header.

Regards

We can give you a simple code snippet to achieve it. Could you please send us your website link so we can check your current configuration?

Yes,

Try to add the following PHP code snippet to the child theme functions.php file to do this

function woodmart_sticky_header_categories(){
    $template = '
        <div class="whb-sticky-header whb-clone whb-main-header">
            <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">
                            <%.header-categories-nav%>
                        </div>
                        <div class="whb-column whb-col-center whb-visible-lg">
                            <%.main-nav%>
                        </div>
                        <div class="whb-column whb-col-right whb-visible-lg">
                            <%.woodmart-header-links%>
                            <%.search-button%>
                            <%.whb-wishlist-icon%>
                            <%.woodmart-shopping-cart%>
                        </div>
                        <%.whb-mobile-left%>
                        <%.whb-mobile-center%>
                        <%.whb-mobile-right%>
                    </div>
                </div>
            </div>
        </div>
    '; 
    return $template;
}
add_filter( 'woodmart_header_clone_template', 'woodmart_sticky_header_categories' );

Now is OK. Thank you.

it would be gread if this (small) sticky header could be create in header builder 🙂

Thank you for the suggestion 🙂

Also i need turn the search on and off the basket.

I think i just need to edit the snippet, but I do not know how.

Thank you very much 🙂

Sorry, what do you mean?

Hide cart (shopping cart) and add search (function) icon as on image.

Attachments:

You must be logged in to view attached files.

Here is a code to remove the cart. If you want to have a search icon, then you need to have this icon added to your main header as well

function woodmart_sticky_header_categories(){
    $template = '
        <div class="whb-sticky-header whb-clone whb-main-header">
            <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">
                            <%.header-categories-nav%>
                        </div>
                        <div class="whb-column whb-col-center whb-visible-lg">
                            <%.main-nav%>
                        </div>
                        <div class="whb-column whb-col-right whb-visible-lg">
                            <%.woodmart-header-links%>
                            <%.search-button%>
                            <%.whb-wishlist-icon%>
                            <%.woodmart-shopping-cart%>
                        </div>
                        <%.whb-mobile-left%>
                        <%.whb-mobile-center%>
                        <%.whb-mobile-right%>
                    </div>
                </div>
            </div>
        </div>
    '; 
    return $template;
}
add_filter( 'woodmart_header_clone_template', 'woodmart_sticky_header_categories' );

1. I added a code but nothing happen, shopping cart did not disappear. And while I look the code is the same as before.

2. Where i need add search icon to show? in header builder is only search form.

Sorry, wrong code. Just remove this part

<%.woodmart-shopping-cart%>

1. OK. Shopping card is now hide.

2. Where i need add search icon to show? in header builder is only search form.

And in theme setings – header – search i have enabled all.

You can use “Search” element and use “Full screen” display option in the header builder.

I do not know what you mean.

We mean “Search” element of our Header Builder. Could you please send us a screenshot of your header structure in Dashboard -> WoodMart -> Header builder.

here is.

Attachments:

You must be logged in to view attached files.

Just edit the “Search” element https://gyazo.com/daf62b53083e67bef3153a30e3191588

Good. 🙂 for completeness. It’s possible to hide the icon so that it can not be seen if it does not roll down? e.g. in snippet?

Do you mean to show it on the sticky header only?

icon, Yes.

Try to use this CSS code

.whb-header .whb-search {
	display: none;
}

Now is header fine. Thank you 🙂

[Author]

Posts