Placing Category dropdown menu in sticky header

This topic has 27 replies, 3 voices, and was last updated 6 years, 8 months ago by yuriix.

Viewing 28 posts - 1 through 28 (of 28 total)

Author

Posts
January 26, 2018 at 3:50 pm #35540

Stanislaw
Participant

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

January 26, 2018 at 8:33 pm #35559

Artem Temos
Keymaster

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

February 28, 2018 at 1:14 pm #42885

yuriix
Participant

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

and how?

Best Regards

February 28, 2018 at 1:15 pm #42888

Artem Temos
Keymaster

Hi,

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

Regards

February 28, 2018 at 1:24 pm #42893

yuriix
Participant

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

February 28, 2018 at 1:30 pm #42896

Artem Temos
Keymaster

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?

February 28, 2018 at 1:36 pm #42897

yuriix
Participant

Yes,

February 28, 2018 at 1:38 pm #42898
Artem Temos
Keymaster
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' );
```
February 28, 2018 at 1:47 pm #42901

yuriix
Participant

Now is OK. Thank you.

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

February 28, 2018 at 1:50 pm #42903

Artem Temos
Keymaster

Thank you for the suggestion 🙂

February 28, 2018 at 2:21 pm #42909

yuriix
Participant

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 🙂

February 28, 2018 at 3:34 pm #42929

Artem Temos
Keymaster

Sorry, what do you mean?

February 28, 2018 at 3:58 pm #42949

yuriix
Participant

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

Attachments:
You must be logged in to view attached files.

February 28, 2018 at 4:07 pm #42954
Artem Temos
Keymaster
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' );
```
March 1, 2018 at 9:32 am #43110

yuriix
Participant

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.

March 1, 2018 at 9:33 am #43112

Artem Temos
Keymaster

Sorry, wrong code. Just remove this part

<%.woodmart-shopping-cart%>

March 1, 2018 at 9:42 am #43121

yuriix
Participant

1. OK. Shopping card is now hide.

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

March 1, 2018 at 9:55 am #43131

yuriix
Participant

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

March 1, 2018 at 12:31 pm #43172

Artem Temos
Keymaster

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

March 2, 2018 at 3:11 pm #43443

yuriix
Participant

I do not know what you mean.

March 2, 2018 at 3:20 pm #43445

Artem Temos
Keymaster

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

March 5, 2018 at 9:51 am #43893

yuriix
Participant

here is.

Attachments:
You must be logged in to view attached files.

March 5, 2018 at 9:53 am #43898

Artem Temos
Keymaster

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

March 5, 2018 at 1:04 pm #43931

yuriix
Participant

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?

March 5, 2018 at 2:27 pm #43952

Artem Temos
Keymaster

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

March 6, 2018 at 5:43 pm #44313

yuriix
Participant

icon, Yes.

March 6, 2018 at 7:40 pm #44339
Artem Temos
Keymaster
Try to use this CSS code
```
.whb-header .whb-search {
	display: none;
}
```
March 7, 2018 at 5:46 pm #44511

yuriix
Participant

Now is header fine. Thank you 🙂
Author

Posts