Custom Header

while lane of code will replace main nav with ajax-search bar in STICKY HEADER?

i tried

navigation = header.find(".widgetarea-head").clone().html(), and '<div class="widgetarea-head">' + navigation + '</div>'

but nothing changed…

You guys helped me to modified this before,,,but i did’t backup before I updates theme..if you can reply me the name of search bar that will be great.

                var body = $("body"),
                    header = $(".main-header"),
                    stickyHeader = header,
                    headerHeight = getHeaderHeight(),
                    headerStickedClass = "act-scroll",
                    stickyClasses = '',
                    stickyStart = 0,
                    links = header.find('.main-nav .menu>li>a');

                if( ! body.hasClass('enable-sticky-header') || header.length == 0 ) return;
                    
                var logo = header.find(".site-logo").clone().html(),
                    navigation = header.find(".main-nav").clone().html(),
                    rightColumn = header.find(".right-column").clone().html();
                    
                var headerClone = [
                    '<div class="sticky-header header-clone">',
                        '<div class="container">',
                            '<div class="site-logo">' + logo + '</div>',
                            '<div class="main-nav site-navigation basel-navigation">' + navigation + '</div>',
                            '<div class="right-column">' + rightColumn + '</div>',
                        '</div>',
                    '</div>',
                ].join('');

I have this in child theme function.php

add_filter( 'basel_header_configuration', 'basel_custom_header_configuration', 1, 1 );

function basel_custom_header_configuration() {

		return array(
			'container' => array(
				'wrapp-header' => array(
					'logo',
					'widget_area',
					'right-column' => array(
						'header_links',
						'cart',
						'mobile_icon',
					)
				)
			),
		);

}

Hello,

The code should look like this

                var body = $("body"),
                    header = $(".main-header"),
                    stickyHeader = header,
                    headerHeight = getHeaderHeight(),
                    headerStickedClass = "act-scroll",
                    stickyClasses = '',
                    stickyStart = 0,
                    links = header.find('.main-nav .menu>li>a');

                if( ! body.hasClass('enable-sticky-header') || header.length == 0 ) return;
                    
                var logo = header.find(".site-logo").clone().html(),
                    navigation = header.find(".widgetarea-head").clone().html(),
                    rightColumn = header.find(".right-column").clone().html();
                    
                var headerClone = [
                    '<div class="sticky-header header-clone">',
                        '<div class="container">',
                            '<div class="site-logo">' + logo + '</div>',
                            '<div class="widgetarea-head">' + navigation + '</div>',
                            '<div class="right-column">' + rightColumn + '</div>',
                        '</div>',
                    '</div>',
                ].join('');

And you need to replace this part inside the js/functions.js file and diable JS minification in Theme Settings -> Performance.

Regards

[Author]

Posts