When you go to the header settings (Appearance > Customize > Header), the drag and drop builder will appear on the bottom of the live preview. It allows you to drag and drop elements into header areas, which is divided into three rows. The rows in the builder represent each area in the header while the columns represent the position, depends on the layout you choose (e.g. in general, if you drop an element at the right side of the first row, the element will be displayed at the right side of your top bar). The placement order in a row also represents the position (stack) of elements.
- First row: to drag and drop elements for the top bar.
- Second row: to drag and drop elements for the main header area.
- Third row: to drag and drop elements for the bottom of the header
- Fourth row: additional row showing the pre-built elements that are not in use. You can drop elements you do not want to use here or drag elements to place it in the header.
Clicking the blue gear symbol in each tab row or element will take you directly to the page settings of it. You can modify the selected area or element quickly without having to go to its section in header settings manually.
Header Elements
To view the list of header elements in use both in desktop and mobile version, you can go to the elements section in the Appearance > Customize > Header > Header Elements.
- Menu and Top Bar Menu: show primary and top bar menu, which is set on menu settings (Appearance > Menus > Menu Locations)
- Megamenu: show megamenu
- Navigation Menu: mobile header menu setting; you can set it up from Appearance > Customize > Header > Header Sidebar/Mobile.
- Logo: show your site logo; upload it from Appearance > Customize > Header > Logo & Site Identity.
- Cart: show the cart icon to display your cart; to modify it go to cart section in header settings.
- Wishlist: show the wishlist icon; go to Appearance > Customize > Header > Wishlist to modify.
- Search: show the search bar; you can customize it from Appearance > Customize > Header > WooCommerce Search.
There are two types of search element, which are search bar and search modal. For the search modal, it will show a pop-up where user can type their keyword then directly get the search result suggestion in columns, while the search bar shows the suggestion in dropdown mode.
- Contact: show contact information which is set on the contact section of header settings.
- Newsletter: show subscribe button to show sign-up form pop-up; set it within Appearance > Customize > Header > Newsletter. To set up the pop-up please read in this section.
- Account: show account menu in the header; to modify navigate to account section in header settings.
- Social Account: show list of social icons which style is set on social icon section in header settings. To set up your social account go to Appearance > Theme Option > Social Account.
- HTML: any custom code to put in the header; you can input HTML code within Appearance > Customize > Header > HTML.
- Button: button elements in the header; to modify, go to button section in header settings.
NOTE: Cart, wishlist, and account element are available after installing and activating WooCommerce plugin and YITH WooCommerce Wishlist plugin.
Header Transparency
To customize header transparency, go to Appearance > Customize > Header > Header Transparent. In this section, you can customize light and dark color schemes for the header elements. Before you custom the color, you need to go to a specific page which has the light/dark header transparent manually.
Choose a different header color scheme for a specific page
You can set up a specific page for the header transparency, simply by choosing a different option from the Header Transparency dropdown available in each page setting section or in Dahz Setting section when you create a new product, page, or post.
For example, if you want to use light header transparency in portfolio page, navigate to Appearance > Customize > Portfolio > Portfolio Layout, then choose the light option from Header Transparency dropdown.
Custom HTML Code
You can also add any HTML custom code to customize the header by navigating to Appearance > Customize > Header > HTML or Appearance > Customize > Header > Header Element Before After.
Header Button
There are two button styles to use in header. To customize the display of each button, go to Appearance > Customize > Header > Button.
