Zakra Knowledgebase
Go to website
Back
Articles on:Customizer [Header]
Customize the header section of your site

Categories

  • Getting Started
  • Customizer [Global]
  • Pricing & License
  • Customizer [Header]
  • Customizer [Content]
  • Customizer [Footer]
  • Customizer [WooCommerce]
  • Page Settings [Header]
  • Page Settings [General]
  • Page Settings [Menu]
  • Page Settings [Page Header]
  • Page Settings [Footer]
  • Developers
  • FAQs
  • Troubleshooting
  • Knowledgebase
  • How to change the Site Logo?
    This theme supports the default Site Identity section provided by WordPress. Site Identity A Logo can be uploaded and changed to best suit your site. From your WordPress Dashboard, go to the Appearance Customize Header Site Identity section. Now click on Select logo and pick a fitting logo for your site. If you are dissatisfied with your logo, you can use the buttons below it to Change logo or Remove it. Click on Publish. It is shown in the imageSome readers
  • Primary Menu Overview
    This theme provides you with various options to customize the Primary Menu of your site. It includes the following options: Disable Primary Menu Keep Menu Items on One Line Menu Item Color: Change the color of the menu items.Some readers
  • How to Add a Retina Logo?
    With Zakra theme version 1.4.8, a new option has been introduced which allows users to upload a Retina (High Definition) version of the logo. This option will ensure that the logo you upload won't look blurred on a high definition screen. To upload a Retina Logo, follow the steps as mentioned below: From your WordPress Dashboard, go to the Appearance Customize Header Site Identity section. Find the Retina Logo option. Click on Select imageFew readers
  • How to style the header media CTA?
    With Zakra Pro 1.2.5, we have introduced styling options for header media CTA, which you can use to change the look and feel of the header media CTA. Spacing: You can increase or decrease the space of the title and text. Title: Change the space of the title. Text: Change the space of the text. Colors: You can change the color of the title and text as per your desire. Title: Change the color of theFew readers
  • Header Media Overview (Pro)
    The Zakra Pro plugin adds more features/options for header media. The available features/options are listed below: Header Media Position: We have provided three options to choose from: Below Header: Header Media on bottom, logo and menu on top. Header Media Position: Below Header Above Header: HFew readers
  • How to Display a Different Logo on Mobile? (Pro)
    Generally, you might want to use a larger logo on the desktop. However, displaying the same logo on mobile might not be a good idea. That’s because the logo used on the desktop might not appear good on the mobile. Another reason to use a different logo on mobile is that loading a comparatively small logo on mobile will save bandwidth in case your site is loading without a Wi-Fi connection. So, how do you display a different logo on a mobile? No worries, Zakra has exactly the feature you areFew readers
  • Show Header Button in Mobile (Pro)
    Zakra Pro has a feature to add 2 header buttons. In Mobile, those buttons would appear inside the mobile menu as menu items. From version 1.4.0, Zakra Pro has introduced a new feature Button on the mobile menu on both Header Button and Header Button Two. Using this feature, you can show buttons on the mFew readers
  • How to remove the Primary Menu?
    The Zakra theme allows you to completely remove the Primary Menu section from your site. Just follow these steps to do so: From your WordPress Dashboard, go to the Appearance Customize Header Menu Primary Menu section. Switch off the Disable Primary Menu option. It is shown in the image below: (https://storage.crisp.chat/users/helpdesk/website/13f4dFew readers
  • How to change the Site Title and Tagline?
    The Site Title and Tagline can be added and changed to best suit your website. From your WordPress Dashboard, go to the Appearance Customize Header Site Identity section. Insert the required Title and Tagline in their respective fields. Click on Publish. In order to make the Site Title and Tagline visible, make sure the Display Site Title and Tagline option underneath the Tagline field is checked. It is shown in the image below: (https://storFew readers
  • How to keep all the Menu Items in one line?
    If you have a long menu and want to keep all the menu items in a single line, then you can do the following: From your WordPress Dashboard, go to the Appearance Customize Header Menu Primary Menu section. Switch to the Keep Menu Items on One Line option. The part of the menu that didn't fit in the line can be accessed by clicking on the more options icon ( i.e., three vertical dots). Click on Publish. It is shown in the image below: (https://storage.crisp.Some readers
  • How to change the Header Media?
    This theme supports the Header Media options that WordPress has provided. Go to Appearance Customize Header Header Media section. Click on Add new image/ video to upload the required image/video for your header. Click on Publish. It is shown in the image below: Header Image (https://storage.criSome readers
  • How to change the typography of the Site Title and Tagline?
    With Zakra, you can also change the typography of the Site Title and Tagline for your website. Just do the following: From your WordPress Dashboard, navigate to the Appearance Customize Header Site Identity section. Under Site Title, choose the appropriate options such as Font Family, Variant, Font Size, and Line Height. Under Tagline, choose the appropriate options such as Font Family, Variant, Subset(s), Font Size, and Line Height. Click on Publish. ItFew readers
  • Primary Menu Overview (Pro)
    The Zakra Pro Add-On comes with additional options for customizing the Primary Menu of your site. Background: Use Background Color to choose a color for the background of the menu or choose an image using Background Image. Padding: Set tPopular
  • Header Top Bar Overview
    Zakra allows you to customize the header as per your needs. You can add different types of content and style it as you like. Explore all header options, and you will be able to create an attractive header for your site. This theme provides you with the following options in the Header Top Bar. Enable Header Top Bar Add left or rightSome readers
  • How to change the typography of Menu?
    If you have the Primary Menu and Mobile Menu enabled for your site, Zakra theme allows you to change their typography as well. Primary Menu Choose the customization for primary menu fonts such as Font Family, Variant, Font Size, and Line Height. Choose the customization for the drop-down sub-menu of the primary menu. It is shown in the image below: Primary Menu Typography (https://storFew readers
  • Primary Menu : Menu Item Overview (Pro)
    You have additional customization options for items in your Primary Menu in the Zakra Pro Add-On. The options are as follows: Style: You can pick from one of the two style options for your menu items. Default: The itFew readers
  • How to enable the Header Top Bar?
    Header Top Bar From your WordPress Dashboard, go to Appearance Customize Header Header Top Bar. Toggle on the Enable Header Top Bar option to reveal the header top bar options. Click on Publish. It is shown in the image below: You might not see any changes just after enabling the Header Top Bar. In that case, you will have to add the content as instructed herFew readers
  • How to add content on the Header Top Bar?
    Header Top Bar First of all, make sure that the Header Top Bar is enabled. How to enable the Header Top Bar? From your WordPress Dashboard, go to the Appearance Customize Header Header Top Bar section. Underneath the Left Content/Right Content options, you can use the dropdown menu to select one from the Text/HTML, Menu and Widget. If you choose Text/HTML in thePopular
  • Primary Menu : Dropdown Overview (Pro)
    With the Zakra Pro Add-On, you can also customize the Dropdown Menu from the Primary Menu of your site. It comes with the following options: Width: Select the width of the Dropdown Menu. It is shown in the image below: 2. Background Color: Choose the color for the background of *Dropdown MenuFew readers
  • How to remove the search icon from the Header Main Area?
    To remove the Search Icon on your Header, follow these steps: From your WordPress Dashboard, go to the Appearance Customize Header Header Main Area section. Toggle off the Enable Search Icon option. Click on Publish. It is shown in the images below: When the Search icon is enabled. When the Search Icon is disabled. (https://storage.crisp.chat/users/hePopular
  • Header Main Area Overview
    This theme provides you with the following options in the Header Main Area. Style You can change the position of Site Identity and Navigation Menu in the Header Main Area using the Style option. Choose the Style from available options like the below: First option: Site Identity on the Left & Navigation Menu on the Right side. Second option: Both at the Centre. Third optioFew readers
  • Primary Menu : Dropdown Item Overview (Pro)
    With the Zakra Pro Add-On, it is possible to configure how the items in the Dropdown Menu of your Primary Menu appear. You will have access to the following options: Menu Item Color: Select the color of the items on the Dropdown Menu. Menu Item Hover Color: Select the color of the menu items in the Hover state. Menu Item Active Color: Select the color of the menu items in the Active state. Menu Item Background Color: Select the color of the backgroFew readers
  • Mobile Menu Overview (Pro)
    The Zakra Pro Add-On enables you to have a separate Mobile Menu in place of your default menu. It comes with the following options: Toggle Menu Breakpoint Background Color: Select the background color of the Mobile Menu. It is shown in the image below: (https://storage.crisp.cPopular
  • How to change the color of the Site Title and Tagline? (Pro)
    You can modify the color of the Site Title as well as the Site Tagline with new options in the Zakra Pro Add-On. Site Title Color: Select the color for the Site Title. Site Title Hover Color: Select the color for the Site Title during Hover mode. It is shown in the image below: Site Tagline Color: SeFew readers
  • How to change the Mobile Menu Breakpoint Width? (Pro)
    The Mobile Menu Breakpoint is an additional customization option with the Zakra Pro Add-On. Using this feature, you can choose the screen width necessary for the Mobile Menu to be triggered. With a larger Breakpoint Width, you can make the mobile menu appear on the desktop. To change the breakpoint width, you need to do the following: Go to the Appearance Customize Header Menu Mobile Menu section from your WordPress Dashboard. Select the value you prefer under thFew readers
  • Header Button Overview
    This theme provides you with an option to add a button on the header, which you can customize as you choose. It includes the following options: Add Button Text and Link Open link in new tab: This option can be used to open the links in a new tab when the button is clicked. Text Color: Change the color of the text in the buFew readers
  • How to add button in the Header?
    Header Button From your WordPress Dashboard, go to Appearance Customize Header Header Button section. Add your text in the Button Text field. Insert the link in the Button Link field to redirect the button to the link. Click on Publish. It is shown in the image below:Some readers
  • How to change the Toggle Button Style for Mobile Menu? (Pro)
    The Zakra Pro Add-On also allows you to change the style of the Toggle Button for the Mobile Menu of your site. To do so, you will need to do the following. Navigate from your WordPress Dashboard to Appearance Customize Header Menu Mobile Menu. Find the Style option under the Toggle Button section. From the drop-down menu, pick one of these three available options: Minimal: Three horizontal bars. Fill: Three horizontal bars on a rectangular backgrouFew readers
  • How to change the typography of the Header Top Bar? (Pro)
    The Zakra Pro Add-On enables you to change the Typography of the Header Top Bar. Widget Title Under Widget Title, choose the appropriate options such as Font Family, Variant, Font Size, Color, and Line Height. It is shown in the image below: Widget Content Under Widget Content, choose the appropriatFew readers
  • Header Top Bar Overview (Pro)
    The Zakra Pro Add-On provides you with the following additional options regarding the Header Top Bar. Style: The Style option changes the position of the Left Content and the Right Content on the Header Top Bar. Choose the *StylePopular
  • How to change the typography of the Mobile Menu? (Pro)
    The Zakra Pro Add-On has additional options for customizing the typography of the Mobile Menu. These options are as follows: Sub Menu Under Sub Menu, choose the appropriate options such as Font FamFew readers
  • Header Main Area Overview (Pro)
    With the Zakra Pro Add-On, you can customize the Header Main Area in a number of new ways. The additional options are as follows: Enable Dual Menu (https://docs.zakratheme.com/en/article/how-to-display-double-menu-on-page-pro-ai9bPopular
  • How to display double menu on page? (Pro)
    Zakra Pro provides you with a dual menu feature for your site. This feature allows you to display two menus as left & right menus and site identity centered on the header. Follow the steps below: Navigate to Appearance Customize Header Header Main Area. Switch on Enable Dual Menu and click Publish. Navigate to Appearance Menus, create new menus & click on Left under Display Location for left menu and similarly click on Right for right menu. (hFew readers
  • How to change the Typography of the Header Button? (Pro)
    Using the Zakra Pro Add-On, it is possible to customize the typography of the Header Buttons. Header Button One Under Header Button One, choose the appropriate options such as Font Family, Variant, Font Size, and Line Height. It is shown in the image below: Header Button TwoFew readers
  • How to select a different design for the Header Main Area on mobile devices? (Pro)
    The Zakra Pro Add-On enables you to set where the Site Identity and the Navigation Menu are positioned on the Header Main Area on Mobile Devices. From your WordPress Dashboard, navigate to the Appearance Customize Header Header Main Area section. Select one of the six options underneath Style : Mobile. Click on Publish. Available Mobile Style Options First option: The Default Layout. Second option: Site Identity on the Left andFew readers
  • How to select where the Header Media is visible? (Pro)
    The Zakra Pro Add-On also allows you to set the visibility of your Header Media. To do so, follow these steps. Navigate from your WordPress Dashboard to the Appearance Customize Header Header Media section. Use the drop-down list below Header Media Visibility to select one of the three options available. All Pages: It will be visible on all pages of your site. Front Page Only: It will only be visible on the Front Page. Other than Front Page: It willFew readers
  • How to remove the Cart icon from Header Main Area? (Pro)
    The Zakra Pro Add-On also comes with the ability to remove the Cart Icon from your Header Main Area. It can be done with these easy steps. From your WordPress Dashboard, navigate to the Appearance Customize Header Header Main Area section. Toggle off the Enable Cart Icon option. It is shown in the images below. With the Cart Icon Enabled. With the Cart Icon DPopular
  • Header Button Overview? (Pro)
    The Zakra Pro Add-On also comes with some additional options when it comes to Header Buttons. Border: Set the size of the border around your Header Button. Border Color: Select the color of the Button border. Border Hover Color:Few readers
  • Header Button Two Overview (Pro)
    Using the Zakra Pro Add-On, you can add another button to your Header. To do so, follow these steps: From your WordPress Dashboard, go to Appearance Customize Header Header Button Two section. Add your text in the Button Text field. Insert the link in the Button Link field in order to redirect the button to the link. Click on Publish. It is shown in the image below: (https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/header-button-twolvsosw.Few readers
  • Sticky Header Overview (Pro)
    The Zakra Pro Add-on allows you to make the Header Sticky and choose different styles for the Sticky Header. It has the following options: Enable Sticky Header Background: Change the background color of a Sticky Header using Background Color or use Background Image to upload a background image instead. Site Title Color: Set the color of the Site title of aFew readers
  • How to enable Sticky Header for your site? (Pro)
    You can have the Sticky Header feature for your site with the Zakra Pro Add-On. Navigate to Appearance Customize Header Sticky Header from your WordPress Dashboard. Toggle on the Enable sticky header option. Click on Publish. It is shown in the image below.Few readers
  • Transparent Header Overview (Pro)
    The Zakra Pro Add-on allows you to make the Header transparent and choose different styles for the Transparent Header. It has the following options: Enable Transparent Header Background Color: Change the background color of the Transparent Header. Site Title Color: Select the color of the Site Title of the Transparent Header. Site Title Hover Color: Set the color ofFew readers
  • How to make the Header Transparent? (Pro)
    You can easily make the header of your site transparent if you have the Zakra Pro Add-on. Just follow the steps below: From your WordPress Dashboard, go to Appearance Customize Header Transparent Header. Toggle the Enable Transparent Header option on. Click on Publish. It is shown in the image below: (https://storage.crisp.chat/users/helpdesk/websiFew readers
  • How to change the Logo Width of the site? (Pro)
    The Zakra Pro Add-On also enables you to change the width of the logo. Just follow these steps: From your WordPress Dashboard, go to the Appearance Customize Header Site Identity section. Change the Logo Width option to select the size of the logo. Click on Publish It is shown in the image below:Few readers
  • How to redirect the Header Media to another web page? (Pro)
    With the Zakra Pro Add-On, you can redirect somewhere else from your Header Media. To do so, follow these steps. From your WordPress Dashboard, navigate to Appearance Customize Header Header Media. From the dropdown menu below the Link To option, choose one of the three options. None: The HeadeFew readers

Not finding what you are looking for?

Chat with us or send us an email.

  • Chat with us
© 2023Zakra Knowledgebase