Conditional WordPress Headers with Neve Pro (Custom Header Builder)

In this video, I will show you how to use the new conditional headers feature of our Neve Pro WordPress theme to design separate headers for pages like shop and news on your WordPress website.

?Documentation - https://docs.themeisle.com/article/1253-multiple-headers-pro
Download Neve Pro: http://bit.ly/NeveWPTheme

This is just one of the full website demos you can import from the Neve site library and it can be edited with page-builders like Elementor, Brizy and Beaver Builder for now.

I'll choose the Elementor version just for the purpose of this video and then I open the shop page and the news page, which is the blog, in new tabs.

Basically, you can design conditional headers for every page on your website but to keep this video as short as possible, I'll create only three different headers.

To do that, click on customize then go ahead and access the Global Header Settings.

Turn off the Show This Header Site-wide and you will notice that now you are customizing the Default Header.

To create a new header, click Add New Header over here and then name it as you want.

Shop, is one of the headers I want so I'll type in Shop over here and then click the blue Add button on the right.

Next, I need to Add the Rule Group, so if I want this header to be shown only on the products page, which is the shop in my menu, select Archive Type in this drop-down and then Products over here.

Now I can start building my shop header by adding a Search Form near the Logo & Site Identity component, and I want to add a cart icon to the right.

It's enough for the shop page, I guess.

The Primary Menu above will stay as it is but I would like to change the background color to orange and the Primary Menu items color to a combination of black and white.

Maybe the color on hover too.

Cool.

Let me shrink the row height a little bit, in the Header Main settings under the Style tab, and I think I am done.

What else can be added to this menu?

A wishlist button!

To do that, shrink the Primary Menu component and then click here to add a new one.

Insert the Wish List and if you see this warning, which is wrong actually, go to the WooCommerce settings, Product Catalog and look for the Product Card settings.

Pick your preferred layout for the Wish List and you are good to go.

Now you can go ahead and change the color of this component like so, its size and also some layout settings in this tab.

Alternatively, you can activate the Wish List button as your Last Menu Item in the General Settings of your Primary Menu.

The last thing I want to do is to change the background color of the Header Bottom section to black and upload a logo that fits perfectly with this color combination.

Stick this header to top, if you want that, by enabling this feature in the Layout Settings of the Header Bottom section or make it show up only on scroll.

That's it.

My shop page has a different header now and to make sure everything is working properly, I will reload the page in this tab and try navigating through different pages.

As you can see, my default header is displayed on all of my pages but when I go to the shop page, the header is different.

If you want a header that will display the categories of your blog on the blog page, here is what you need to do.

Go back to your dashboard, and in the Global Header Settings, click Add New, name it Blog, click Add, select Archive Type in this drop-down and then Posts below.

I only want the blog categories and nothing else, so remove these components and insert the secondary menu.

Select the proper menu in this drop-down or click Create New Menu.

Name it Blog or whatever and click Next.

Add as many items as you want from your categories and publish the changes.

Go back to Header then access the Global Settings again, make sure you are customizing the Blog header and change some style settings like the background, items color and you may want to add a search Search Icon to the right.

That's it.

Now if you go to your website and click on News you will see that the header is different and...

something is missing, actually.

Let me go back to the Secondary Menu builder and add the home element so your visitors can navigate back to the homepage anytime.

Alternatively, you can use the primary menu in the header top section.

To create mobile versions of your headers click on Mobile and build up each header carefully.

A new feature added recently is the Disable Homepage Link in the Logo & Site Identity component.

This is it, guys.

If you have questions, please leave a comment below and I will answer each of you.

#NevePro #WordPress #Themeisle