CLONE HEADER MODIFIED

Hello, I have soome question for editting my header clone, I’m adding the next PHP code for modify the default clone header:

/*clon de cabecera de scroll mejorado*/
add_filter( 'woodmart_header_clone_template', function( $template ) {
    $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%>
							<%.site-logo%>
                        </div>
                        <div class="whb-column whb-col-center whb-visible-lg">
							<%.woodmart-search-form%>
                        </div>
                        <div class="whb-column whb-col-right whb-visible-lg">
							<%.my-account-with-icon%>
                            <%.woodmart-wishlist-info-widget%>
							<%.woodmart-compare-info-widget%>
                            <%.woodmart-shopping-cart%>
                        </div>
                        <%.whb-mobile-left%>
                        <%.whb-mobile-center%>
                        <%.whb-mobile-right%>
                    </div>
                </div>
            </div>
        </div>
    ';

    return $template;
} );

I have modified the PHP code in my child theme, It’s working well, but I expected a clone header like this example, so..How can I hide the text in the categories menu in the clone header,like the picture?, in the mobile version It’s keeping the default clone header, I didn’t want modify it.
I hope you can help me with that..

Regards..

Hello,

You do not need to add any nippets to the child theme to configure the menu as per your needs. If you want to remove categories from the search, enter the Search elemtn and disable showing categories.

Please navigate to Woodmart > Header builder http://prntscr.com/iyd2pe

Choose the proper header type (you current) http://prntscr.com/iyd333

Modify elements as per your needs: http://prntscr.com/iyd3h3

Take into consideration that there is also the mobile view of your header http://prntscr.com/iyd3v3 check all the elements there.

More detailed instruction are here: https://xtemos.com/docs/woodmart/header-builder/

Best Regards

Thanks, but the reason I want to use a cloned header is that like the default cloned header of the theme, it is displayed in a single line .. that is to say with only some items in the header.
Regarding the categories, in fact I do not want to delete them since I need them for the products, what I want to hide is the text that is next to the categories in the cloned header, but in the header at the beginning of the page that remains(without any modification, as modified in the section of editing headers in the theme).

this is an example

Hello,

If you want to show your elements on the sticky header you do not need the cloned header. You need to disable it. And make the rows sticky.

1. Disable the cloned header and make the rows sticky.

2. Hide the text you want to hide with custom CSS.

Best Regards

Maybe you don’t understand me, sorry, here I send you a GIF of the behavior of my header, I like it like this my original header, but when I scroll down, the “cloned header or sticky header” appears (as the gif) with some icons from the original header, that sticky header by default has some preset icons, so that’s why I have added PHP code..so that cloned header only has the items I want.
Now in the categories part (marked with the mouse over the GIF) (which has an icon and a text both in the original header and in the cloned header), I want only “the icon to appear in the sticky header and not the text”, only in the sticky header, since in the original header has text and I want to remain that text of the categories in the original header. https://snipboard.io/D6zfPg.jpg

Hello,

Default header: two rows.

Sticky header: one row and header clone has been enabled – right?

You want the sticky header to be the same as the default header – right?

1. Deactivate the cloned header.

2. Enable sticky for both rows in the header.

In the result you sticky header would be exactly the same as the default header. Your sticky header would not change.

Best Regards

Thanks for the answer..
About your questions:
Sticky header: one row and header clone has been enabled – right?

Yes, but It’s enable two row header (the original header, the first header you see on the page has two rows)
and one row header (clone header, sticky header when you scroll down), this header has been customized by PHP (because the clone header when you scroll down has the the Main menu, LOGO, Login, wishlist, compare and cart), so I decided to add a nippet PHP for a customize clone header (sticky when you scroll down), with the items, Categories, LOGO, Search form, login options.

You want the sticky header to be the same as the default header – right?
No, I want a sticky header (when you scroll down), in one row (the clone header with custom items). That’s the reason I have used a nippet code.

This modified CLONE HEADER by PHP code has:
Left (categories, LOGO) ,here in categories I only want use the “ICON” no ICON with the text “PRODUCTOS POR CATEGORIA” (THIS IS THE REASON OF THIS THREAD)..
Center (search form)
Right (wishlist, compare, login, cart)

1. Deactivate the cloned header.
I want to use the clone Header because it increases the space of the screen, since it is simplifying it in a single row the HEADER when you scroll down.

Maybe I did not explain well what I wanted, sorry..

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.whb-sticky-header.whb-clone .header-categories-nav-wrap .menu-open-label {
	display: none;
}

Enable the cloned header, and check.

Best Regards

Hello,It’s working, but It’s happening this behavior in the clone header
https://i.gyazo.com/aa63ebcccad06f4374603f0f26c0fbba.gif

Hello,

Please replace the recent custom CSS with this one:

.whb-sticky-header.whb-clone .header-categories-nav-wrap .menu-open-label {
	display: none;
}
.whb-sticky-header.whb-clone .header-categories-nav-wrap .menu-opener {
  min-width: auto;
}

Best Regards

Hello, the header looks amazing!!
but I have this problem whith the categories’ submenu
https://i.gyazo.com/be433f117f442818ae8c6e9bd99791c1.gif

Sorry to bother you so much, I really appreciate your help…

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .header-categories-nav .categories-menu-dropdown {
   min-width: 280px;
}

Best Regards

Excellent!! looks great… thanks a lot!!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts