How to Add Dynamic Header with Kadence Theme Pro | Kadence Pro

hi and welcome to my youtube channel my name is natalie apo's website has an organized navigation system when someone clicks it displays below as you menu navigation bar with products and services connected with that specific category in today's video i recreate this menu for you i use the new conditional header feature available from cotton steam pro to be displayed only on a specific page let's go if this is your first time on this channel i want to say thank you so much for stopping by on this channel i shared a lot of wordpress tutorials to help you on your online business too many items are in your navigation homepage it's terrible why because human short-term memory only holds about 7 items april's website has done a great job uses a flat navigation style when someone clicks it switches between multiple content categories this video shows you how you can implement this flat navigation style in your wordpress website by using conditional headers this is the website i'm running this is a woocommerce website and i've built this with the cadence team and what i want to do is to implement here in my contact page a conditional header so from the wordpress cadence dashboard make sure you activate your current steam license key toggle arm to write to enable the header add-ons conditional headers hooked elements and ultimate a menu now first i need to create the mega menu for my conditional header let's create these now go to wordpress dashboard customize and menus we create a secondary one click on create menu give it a name secondary for me and click create menu i had some custom links and then the following are plan one two and three hashtags in the url field and i type in the custom text and head to menu don't forget to check the secondary in the display location section now i drag some sub menu items to the right because i want that they are menu items category and save the menu for my top navigation link item i want to enable the mega menu option click on the menu item settings click on the mega settings at the top toggle on the enable mega menu drop down the width i go with fluid columns 3 equal columns next we are going to go to put some icons to my submenu items so i click on each one menu item settings in label settings i choose my menu item icon left side choose the icon color to blue the size 200 pixels and then scroll up to save and click on the close button to save once more so that you don't lose your hard work i repeat the same process for the remaining submenu items and save the menu to the ends now that we have built the main navigation structure it's time to configure the conditional header open up wordpress customizer customize header scroll down and enable conditional header under the current preview header it says we are looking at the default header that this website uses i want a new one so i click on add new button we got three options the start copy default copy default and import the start basic is for cases where you want to create a new header from scratch the second option is for cases where you want to copy the default header and then you easily had it as you want for this video i use the copy default underneath you will see a new conditional header show up in your customizer called copy default header click the arrow the drop down icon to change the header label to contact the first display option is to set when to display basically you are defining where you want your new custom header to show up in the drop down list you see the whole possible locations you can set up i go with single pages as i only want this header to show on my contact page individual and then i select my target page contacts inside the user options you decide if you want to display to all users or to some or to some of them and then scroll up all the way and collapse the options and publish your settings with all the settings in place it's time to preview in order to do this go to the top of the conditional header options in our cadence customizer and find the section that says current previewing header click the drop down and choose your new conditional header in my example i'm going to choose contacts you get a message asking you if you really want to preview to preview the new header click confirm below to save your settings and enter into previewing modes cool now we are previewing the new header i'm able now to do some editing right from the customizer i click on the plus icon to have the new elements and then i i select the secondary menu to my middle row go back once click the header again we still are in preview modes we are almost done the last step is to activate the header in the customizer go back once to the conditional header section to do so click on the left arrow scroll down to conditional header and from there all you have to do is click the toggle on your new header to activate the header on your sites and then click publish let's check this live i click on the contact page and i'm seeing my new header options and then i hover over on top i get my three little two menu items underneath in a full width manner just like april's websites there you go you can you now can set up a new custom header to use you know to use in your website business the way you need to if you find this a video informative make sure to subscribe to this channel leave a like down below or leave your thoughts in the comment section below have a great day wherever you are i see you in my next video thank you very much

Channel: Sites with Natalie

Views: 506

Keywords: How to Add Dynamic Header with Kadence Theme Pro, Dynamic Header with Kadence Theme Pro, kadence conditional header, kadence header conditional, kadence header builder, customize kadence header, kadence header tutorial, kadence theme header builder, kadence theme header, kadence conditional content, kadence hooked elements, conditional content kadence, kadence hooks, kadence pro, kadence theme pro, sites with natalie, kadence theme tutorial, Kadence wordpress theme

Id: NouJTmtRDQI

Length: 7min 36sec (456 seconds)

Published: Fri Sep 10 2021