Build Your Header

The header is the top section of your website, shown across all (or almost all) pages and posts. It’s something that every website visitor sees first. It’s your chance for a great first impression. 

This is a place for visitors to meet your brand, your offer, or an idea, and to be initially delighted and intrigued to explore your website further.

Astra Theme Walkthrough Docs:

1. Astra Theme Walkthrough
2. This Is Your Customizer
3. Style Your Website With Global Settings
4. Build Your Header (currently reading)
5. Find the Way With Breadcrumbs
6. Set Up Your Blog
7. Add Your Sidebars
8. Build Your Footer
9. Host Google Fonts Locally – Performance Is the Key
10. See Other Customizer Options
11. How To Build Quick Sites With Astra?
12. Getting the Most Out of Astra Theme

Astra theme comes with a drag & drop Header Builder – a perfect tool for you to create great headers quickly and without any coding. Here you will be able to add and customize your: 

• Logo
• Site title and tags
• Header styles
• Website menus
• Header buttons
• Social icons

And more. 

You have full freedom to position elements by just dragging them to any position in the header 

Header Builder Elements

This is accessible at Appearance > Customize > Header Builder. 

All of your active header elements will be listed on the left-hand menu. Under “Header Types” you can find the transparent header settings.

The rest of the screen will show a live preview of your header and the position of your elements across header sections.

Note: Some of these options will only be visible when you upgrade to Astra Pro.

Site Title & Logo

This is your Site Identity & Logo element. In the General tab, you can add your Logo, set Logo width, and add a Different Logo for Retina devices.

You can also set Site Title, Site Tagline, and your Site Icon (favicon). This information is also displayed on the top of your website tab in your browser.

The Design tab is used if you want to add colors and margins to these elements.

Button

The button element is used for adding a custom button to your header. Add the Text, Link, and style (Design tab) button here.

Primary Menu

Here, you will find menu items added to your Primary Menu (WordPress Dashboard > Appearance > Menus). 

The General tab provides you with these two submenu options: 

• Submenu Width
• Item Divider (adds or removes divider between submenu items)

You can also decide if to set your menu items to Stack on Mobile. This is the most common setup for mobile menus – the menu items will be stacked one on top of the other.

The Design tab will allow you to customize:

• Menu Hover Style
• Style your Submenu Container
• Add submenu animations (a secondary menu that appears when you click or hover over a main menu option)
• Set the Text and Background Colors
• Menu Fonts, Manu Spacing, and Margin.

Transparent Header

Enabling a transparent header will remove the header background color and shift your content to the top of the page underneath the header, creating the transparency effect. 

When the transparent header is enabled, it’s advisable to add a hero image (e.g., full-width image or video, sliders, etc.) or use sections without content (e.g., headings or text) positioned on top – this way, you will avoid overlapping the content and the header.

Transparent Header – General Options

Click the “Enable on Complete Website” option to enable the transparent header. This will also open up additional options to disable the Transparent Header for a specific page or post type.

Enable On – Choose to enable transparent header on Desktop, Mobile, or both (Desktop+Mobile)

Different Logo for Transparent Header – if your Logo looks good on the standard header, but maybe not so much with a transparent one, you can activate this option and set a different logo to be used for the transparent header. 

You can also set the transparent header Logo Width. Depending on the logo you’re using, you might want to add a logo for Retina (higher pixel density) screens which should be at least 2x larger or more. Just click on “Different Logo for Retina Devices” and upload your retina Logo.

Transparent Header – Design Options

You’ll find options for styling your Transparent header here. Set the site title, background, menu, submenu, and colors. 

Also, there are options for setting background overlay and bottom border. There’s much more you can do here.

The bottom border is by default set to 0px and thus not visible – increasing the border value (1px or more) will make it show on the frontend, and you will also get the option to set the Bottom Border Color.

Keep in mind that these settings are applied only to your Transparent header. If you’re using your regular header on some pages, these settings will not be applied there.

Designing Your Header Builder

The Design tab is used to set your header spacing.

Full Width will spread your header widgets from edge to edge of the screen;

Content Width limits your header widgets to be displayed using your content width – your header background will still be stretching from edge to edge of the screen.

Margin adds space to one or more sides of your header. This will add space to both your header widgets area and background.

With Astra Pro, you can access additional elements such as sticky headers, language switchers, and more design options overall.

Visual Header Builder

The header consists of three separate sections which you can see in the visual header builder area. You can use all three sections to add any element to any position. 

These three sections are:

• Primary Header – this header is the middle section. It is most commonly used for adding your most important elements like Logo, Primary Menu, or Search, Cart, and Account.

• Above Header – this header is the upper section, and it is displayed above the Primary Header on your website. It can be used for your secondary elements, like the secondary menu, or elements like social icons, call-to-action buttons, etc. You can also use HTML code to add for example current discount periods, breaking news, or some notifications for the website visitors. 

• Below Header – this header is the lower section, and it is displayed below the Primary Header on your website. The use of this header is the same as the Above Header.

The main purpose of the Above and Below Headers is to avoid cluttering the Primary Header. They extend the available area for adding all elements and information you need in your Header, as well as to provide a certain level of prioritization.

You can customize each section by clicking on the “settings” icon on the left side of the sections. 

Each section has two tabs:

General

• Height – set the height of each header separately.

Design

• Bottom Border Size (& Color) – if you need to separate your header from another section or website content you can add a bottom border by setting the size of your border. Once you set your border size, an additional option will appear (Bottom Border Color) for choosing the color of the border;

• Background – Set the header background color;

• Padding – Add padding on one or more sides of the header. This will add space between the header section edges and content;

• Margin – Add margin on one or more sides of the header. This will add space between that header and other website areas (other headers, page/post content, screen edges, etc.);

Each header can be customized separately for desktop and mobile and can have different elements added for each view. The position of elements can also be changed.

Off Canvas 

The Off Canvas section is used to edit your tablet/mobile menu. This menu is activated by clicking on the Toggle Button in the mobile menu (also called the “hamburger” menu). 

To edit this menu, switch to tablet or mobile viewport editing. You can add elements to this menu and set their order the same way you edit other header sections.

Following are the customization options provided within the off canvas:

General Options for Off Canvas

• Header Type – Set Off Canvas type to Flyout (menu flying in from the right or left side of a screen), Full-Screen, or Dropdown;

• Dropdown Target – Choose if you want your submenus to open by clicking on the down-arrow icon (Icon) or by clicking on a whole menu item (Link) 

• Content Alignment – align the Off Canvas section widgets to Left, Centar, or Right;

Design Options for Off Canvas

• Inner Element Spacing – adding space between the elements;

• Background – set the background color.

Adding Elements to Header with Visual Header Builder

Using the + icon, you can add the following elements to any of the 3 headers. These are the following:

Search

Adding this element will add a search function to your header. You can set the Icon Size, Icon Color, and Margin.

Social (Header)

You can add your social media icons using this element. You can manage your social media icons using the General tab – add, choose the icon, or remove them. 

The Design tab holds the options for styling the icons.

Secondary Menu

You can add another (secondary) menu to your header if you need it. You can also use this if you wish to split your primary menu into two separate menus – for example, if you want to create a header with a centrally positioned Logo, with your menu items next to it on the left and right sides.

You can customize this menu the same way as the Primary Menu.

HTML

Use this element to add HTML code or shortcodes.

Widget

This is used to add any of the website widgets (Dashboard > Appearance > Widgets) to your header.

Toggle Button

The Toggle Button (also known as the hamburger icon or button) is used to expand your tablet/mobile menu. Thus, this element is only available on tablet or mobile views. 

The General tab will enable you to choose the button Icon and Icon Size, add the Menu Label (text next to the icon) if you need it, and the Toggle Button Style. 

The styling options are located in the Design tab: Icon Color, Background Color, Border Radius, and Margin.

Account

If you have some plugins like LearnDash or WooCommerce active, you can add the user account shortcut using this element.

Cart

This will add a Cart icon (WooCommerce) to your header. Next, set if the Cart Title should be displayed as well, or only the Cart icon, and whether you want to display a Cart Total too (General tab). You can also style your cart and your cart tray (Design tab).

That’s it with the article! We hope it helps you. For any assistance, contact our support team.