Custom header

Hello Support team,
First of all, thank for great theme and I’m glad to work with it.
I’m trying to change the header, but having trouble, take a look at the screenshot, i have described it https://www.screencast.com/t/L5I0uLN4rMCg
I want the header same like this: https://www.screencast.com/t/d4tlHCoWR
Please guide for me, I have read the document but it does not seem to help this part.
Thanks.

Hello,

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

1. Try to add this code snippet to the functions.php file in the child theme to change it

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(
						'search',
						'wishlist',
						'cart',
						'mobile_icon',
					)
				)
			),
			'navigation-wrap' => array(
				'container' => array(
					'categories_menu',
					'main_nav'
				)
			)
		);
}

2. Try to add the following code snippet to the Custom CSS area in Theme Settings

.secondary-header .mega-navigation {
	width: 20%!important;
}

3. Disable this menu from the top bar in Appearance -> Menus -> Manage Locations.

4. Add both search and your custom HTML to the header widgets area in Appearance -> Widgets.

5. Please, provide us your website link so we can take a look at it.

Kind Regards
Xtemos

Hello,
Thanks for your answer.
1– Not OK
this is what i want: https://www.screencast.com/t/hhhxfLjEjZ
This is the result after adding the code you gave: https://www.screencast.com/t/ZfUtjiaDL
2– OK
3– OK
4– OK
5– I want to add brand logo in the top, full width same like this https://www.adayroi.com/
Thank for your help!

We need to see your website first.

I just installed it on localhost, just installed your Basel theme, did not edit so you are not difficult to imagine. If you want me to give you a purchase code, I can give it for you

Sorry, but we can’t check it without looking on your website.

So, there is no other way? I want to finish editing under localhost before uploading it to hosting. I have described the idea very carefully. Do you not understand? If you think the code you provided works correctly, please take some screenshots for the test. Your theme looks great, but the header is hard to change..

I understand, but it is really not possible to help you modify the header if we don’t see how it currently looks like. You want to have a custom header that did not exist in our theme at all and you were not able to see it on our demo. So we are trying to help you to achieve it but we need to see your website.

Regards

here is link demo my website: http://demo.namvietnet.com.vn/test/
now, please guide me. Thank a lot!

But it seems that you didn’t apply any of the things we wrote you initially.

Ok, Please try again.
That is the result after adding the code you gave. Now I’m just interested in how to change the location of megamenu and search: https://www.screencast.com/t/hhhxfLjEjZ
thanks a lot!

Try to add the following code snippet to the Custom CSS area in Theme Settings

.header-categories .mega-navigation {
	display: inline-block;

	margin-right: 20px;
}

.header-categories .mega-navigation .menu-opener {
	padding-right: 40px;
}

.header-categories .main-nav.basel-navigation {
	display: inline-block;
}

header.header-categories .main-nav .menu li.menu-item-design-full-width>.sub-menu-dropdown {
	margin-top: 0;
}

.header-categories .main-nav .menu > li > a {
	height: 63px;
  line-height: 63px;
}

.header-categories .navigation-wrap > .container {
	height: 63px;
}

And place your search widget to the header area in Appearance -> Widgets.

Good job, but the when hover “Browse Categories” does not display the drop down list, how to fix it
Thank.

You need to specify your categories menu in Theme Settings -> Header.

I have selected the Categories menu in the Theme setting -> header ( https://www.screencast.com/t/TlHp2ptE ) but it still does not show up when hover, the problem may be due to CSS?

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.navigation-wrap .mega-navigation.show-on-hover:hover>.categories-menu-dropdown {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

.mega-navigation {
    background-color:#1aada3 ;
}

Hello,
Thanks for the help, it is very helpful!
Now I have a new problem with the header, I describe it in the screenshot here: https://www.screencast.com/t/ePTyq7Jchl
demo site: http://demo.namvietnet.com.vn/test/
Thanks a lot and have a nice day!

Why you don’t answer my topic, while you still answer other topics???

We are working on your request. Could you please provide us your admin access?

Of course, this is admin info

Try to add the following snippet also

body .topbar-content, body .top-bar-left {
	display: block;
}

body .topbar-content:before {
	display: none;
}

body .header-categories .widgetarea-head > div {
	display: inline-block;
}
body .header-categories .widgetarea-head .vc_row {
	margin: 0;
}

Unfortunately, we can’t place the categories menu to the sticky header with CSS.

Oh great, anyway thank you very much, you can close this topic, I will vote for you 5 stars for customer service. Keep up the good work.

Thank you very much for the review!

Regards

[Author]

Posts