Primary Menu

The primary menu is the navigation bar located at the top of your website, which typically includes links to your main pages or categories.

To get started, please navigate to the WordPress Dashboard and click on Appearance>Customize>Header Builder> Primary Menu and head over to the design tab.

Scroll down to the Font Section and click on the pencil icon next to the Menu Font option.

This will open the options to change the appearance of the primary menu such as Font-Family, Font-Weight, Font-Size, and Font-Decoration.

Secondary Menu

If your website is using a secondary menu to display a second set of menu items, you can simply navigate to Appearance>Customize>Header Builder>Secondary Menu and head over to the design tab.

Similar to the primary menu, you will also have to scroll down to the Fonts Sections and edit the typography of the secondary menu by clicking on the pencil icon next to the Menu Fonts.

Sub-Menu (Pro-Feature)

A submenu is a secondary menu that is accessed through a main menu item. It typically appears when you hover over or click on a main menu item and contains a list of additional options that are related to the main menu item.

This is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website. Check out our pricing page to know more about the Astra Pro Addon.

Once you have purchased and activated the Astra Pro addon plugin, you will need to activate the Typography Module by clicking on the Astra option on your WordPress dashboard.

To edit the sub-menu typography, please navigate to Appearance>Customize>Header Builder>Primary Menu.

Scroll down to the Fonts section and you will see the option named “SubMenu Font”. To edit the typography, simply click on the pencil icon next to it.

Similar to the primary and secondary menu options, this will open the options to change the appearance of the submenu such as Font-Family, Font-Weight, Font-Size, and Font-Decoration.

Mega-Menu Heading (Pro-Feature)

Typically, a mega menu is a dropdown menu or expandable navigation area that usually contains more than just text links. If you are not sure how to create a mega menu on your website, here is an article that will guide you through the process. This is also a premium feature of the Astra theme and you will need to install and activate the Astra Pro Addon plugin and also activate the Nav Menu module.

To modify the typography of the Mega Menu Heading, you will need to navigate to Appearance>Customize>Header Builder>Primary Menu.

Scroll down to the Fonts section and you will see the option named “MegaMenu Heading”. To edit the typography, simply click on the pencil icon next to it.

1. Content layout & sidebar layout for Custom Post Types.
2. Banner title area for all single & archive layouts.

Content Layout for Custom Post Types

The content area and the sidebar are parts of the container. The content area is technically called as the primary container, whereas the sidebar is the secondary container.

Prior to Astra Version 4.0.0, the Single Post section & Blog Archive Customizer’s Content Layout & Sidebar Layout will be applicable for all Custom Post Types. But with Astra 4.0.0, we overcome this case and provided these new options under the new customizer section “Custom Post Types”. From here you can access the container layout and sidebar layout.

Once you create the “Custom Post Types” of your choice, you can access the Single and Archive CPT Customizing options from the Customizer itself. For both Single and Archive CPTs, you can see the five types of container layouts.

All 5 container layout types are explained in the following links –

• Boxed
• Content Boxed
• Full Width / Contained
• Full Width / Stretched
• Narrow Width

Sidebar Layout for Custom Post Types

With Astra Version 4.0.0, you get three Sidebar options for the Custom Post Types – right sidebar, left sidebar, and an option that disables the sidebar.

For a better understanding, have a glance at the attached video once.

In the above-attached video, you can see the ‘Movies‘ CPT created using the Custom Post Type UI Plugin.

With Astra 4.0.0, you can see the new customizer section “Custom Post Types“. From here you can access the container layout and sidebar layout for Custom Post Types. Also, by clicking the ‘Movie Title’ you can access the Banner Layout, Container Width, Structure, Meta, Horizontal, and Vertical Alignment.

Title Area for all Single & Archive layouts

With the Astra Version 4.0.0, you can customize the Title Area for all Single & Archive layouts (Pages, Posts, Custom Post Types, and WooCommerce Pages) and optionally the Featured Image and metadata in an elegant fashion.

Before you can add a title to your Pages, Posts, Custom Post Types, and WooCommerce Pages, you will first need to jump into the Customizer settings.

For Pages:

Navigate Appearance → Customize → Page. Here, you can see the ‘Page Title’ toggle button. Enable this toggle button and click on the ‘Page Title’ to customize the Banner Layouts. You can see Layout 1 and Layout 2 here. For the layouts, you can notice the Container Width, Structure, Meta, Horizontal, and Vertical Alignment modules.

Use Case Example: Styling a ‘Page Title’ module for a Page

For this example, I will show you just how easy it is to style a custom page title.

Navigate Appearance → Customize → Page. Here, you can see the ‘Page Title’ toggle button. Enable this toggle button and click on the ‘Page Title’ to customize the Banner Layouts. If you select Layout 1 here, you can notice the Container Width, Structure, Meta, and Horizontal Alignment modules.

Under Structure:

• Title: Here you can choose whether or not to display the Page Title.
• Meta: Here you can choose whether or not to display the Page Meta.
• Breadcrumb: Here you can choose whether or not to display the breadcrumb
• Excerpt: Here you can choose whether or not to display the excerpt
• Featured Image: Here you can choose whether or not to display the Featured Image.

Under Meta:

• Comments: Here you can choose whether or not to display the Comments Count in Page Meta.
• Author: Here you can choose whether or not to display the Author’s Name in Page Meta.
• Publish Date: Here you can choose whether or not to display the Date in Page Meta.

Horizontal Alignment:

Here you can set the Page title alignment to left, right, or center depending on your choice.

If you select Layout 2 here, you can notice the Container Width, Structure, Meta, Horizontal, and Vertical Alignment modules. Everything goes the same as it goes for Layout 1 except the Featured image module. For Banner Layout 2, you can use the featured image as a background image too and you can apply the overlay color as well.

For a better understanding, have a glance at the attached video once.

Likewise, you can set the Title Area for all Single & Archive layouts accordingly.

Key Features:

1. Provides a narrow width to the content for Single Blog Posts, Blog Archives & Pages.
2. The width can be specifically adjusted for Narrow Width Container through Customiser → Global → Container → Narrow Container Width. (Default – 750px, Min – 400px, Max – 1000px)
3. This container does not come with a sidebar, meaning when we set the Narrow Width Layout for any posts, or pages, the sidebar will not be displayed.
4. Ideal for a clean, modern UI experience for Blogs & Pages.

Global Container in Astra Theme

A container is an area where we display the content. In general, the container encloses the whole page.

The content area and the sidebar are parts of the container. The content area is technically called as the primary container, whereas the sidebar is the secondary container.

You can apply container layouts globally for the entire website through the Customizer option at Appearance → Customizer → Global → Container.

Different containers can be applied for individual pages and posts from meta settings. These are page-specific settings that have high priority than customizer settings.

What is Container Width?

Content will be displayed within this width. You can try width in combination with container layout to create different views.

What is Container Layout?

Prior to Astra Version 4.0.0, Astra offers 4 types of Containers Layouts only. These are global containers that will be applied to the entire website. But you can set different containers’ layouts for different post types with Dedicated Container Layout.

All previous 4 container layout types are explained in the following links –

• Boxed
• Content Boxed
• Full Width / Contained
• Full Width / Stretched
• Newly added Narrow Width

With the latest Astra Version 4.0.0, you can access the Narrow Container Width option for the Narrow Width Container Layout. This will adjust the narrow container width for Pages, Single Blog Posts, and Blog/ Archive Pages.

The width set globally through the “Narrow Container Width” will set the value for the content width across the Single Blog Posts, Blog Archives & Pages (provided that those post types are set to Narrow Width Layout). By default value of the Narrow Width Container will be 750px, which will range from 400px to 1000px.

Dedicated Container Layout

The above 5 types of container layouts are separately available for the following post types. That means if you choose the default layout as Full Width/Stretched, and for Archives you choose the Narrow Width option, then the entire site except archive pages will have a Full Width/Stretched layout while Archive pages will have a Narrow Width layout.

• Page Layout – For only pages
• Single Post Layout – For single blog post pages
• Blog/ Archive Layout – For blog archive pages

Example: If you have chosen the default layout as Full Width/Stretched, and for Archives you choose the Narrow Width option, then the entire site except archive pages will have a Full Width/Stretched layout while Archive pages will have a Narrow Width layout.

Have a glance at the attached video for a better understanding.

The sticky header will fix the header in the top portion of your webpage when a user scrolls the page. It will allow quick access to the menu from any part of the page.

Quick Steps on How to Add a Sticky Header or On-scroll Fixed Header with the Sticky Header Module

Step 1: Ensure the Astra Pro Addon plugin is installed and activated. How to Install Astra Pro Addon plugin?
Step 2: Activate the Sticky Header module under the WordPress Dashboard > Astra > Astra Pro Modules.
Step 3: Visit customizer [ Appearance > Customize > Header Builder > Sticky Header ] to edit module settings

It is a premium feature available with Astra Pro. You can activate the module from Appearance > Astra Options > Sticky Header.

You can find the settings under Appearance > Customize > Header Builder > Sticky Header.

Sticky Header Settings

Stick Primary Header option will stick the default theme header.

If you have enabled the Header Sections Module from Astra Pro, you will see options to stick to the Above and below header sections.

Enabling Stick Above Header Section or Stick Below Header Section will stick the respective header section to the top of the page scroll.

Background Color for Sticky Header

All options are available in the customizer under Header Builder > Sticky Header. If you have a sticky primary header, respective options will appear. Different options will appear if the Above and Below headers are set to stick.

Example: If you have a sticky primary header, click on it to open the design options. Navigate to the ‘Sticky Header Option’ to see the background color. Here, you can set the background color of your choice.

By default, WordPress does not have an option to remove the author name, and you must select an author to publish a post.

This article will show you how to remove author names from your WordPress posts easily.

Why would you want to remove Author Name?

Author name is an important type of metadata added to your posts by default. It allows your readers to learn about authors who create content on your blog.

However, there are times when you may want to hide the author’s name. Here are the reasons why hiding or removing the author’s name is beneficial.

1. Multiple Staff Members Collaborated on a Blog Post
2. The Website Has Different Contributors and Freelance Writers
3. The Article is Controversial

With that said, let’s look at solutions for easily removing author names from posts while allowing multiple authors to work in the background.

How to remove Author’s name from a Single Blog Post?

You can modify the way the single posts are displayed on the front end. In the Post Structure and Meta sections, you can set the order of elements in which they are displayed by simply dragging each of them to the desired place in the list.

Navigate to Appearance> Customize> Blog> Single Post. Here, under the ‘General’ tab, click on ‘Post Title’, and you can see the ‘Meta’ module.

Here, you can hide any element in the list by clicking on the “eye” icon on it (click the “eye” icon one more time if you decide to have the element displayed again). Click on the Author eye icon to hide it on the front end.

If you would like to remove the author’s name from a particular post, please use the custom CSS along with the Custom Layout. To know more about how to use custom layouts on your website, please check out this article. If you would like to know more about custom layouts, here is a detailed document. Please note that the custom layout module is a part of the pro version and you would like to purchase one of our bundles from here.

There is no prep but let’s just check your customizer settings.

Navigate to Appearance> Customize > Header Builder> Primary Menu/ Secondary Menu. Then, navigate to the design tab (of either Primary/ Secondary Menu) to see the Menu Color option. Under the Menu Color option, you can see ‘Text/ Link’.

You set your active menu item color in the Active Link Color field.

This above-attached screenshot will be useful for users using regular headers.

If you are using the Transparent Header for all/ few pages on the website and want to highlight the active menu item,

Navigate to Appearance> Customize > Header Builder> Transparent Header.

Then, navigate to the design tab to see the Menu Color option. Under the Menu Color option, you can see ‘Text/ Link’.

You set your active menu item color in the Active Link Color field.

From the WordPress dashboard navigate to Appearance > Customize > Global > Colors. You can see the ‘Site Background’ under ‘Surface Color’. Using the Site background option, you can set the color of your choice here. And the same color will be applied to theme sections throughout the website.

After installing and activating the Astra Pro plugin, please follow the steps below to activate the sticky sidebar.

Step 1: Navigate to the WordPress dashboard, click on Appearance, and click on Customizer.

Step 2: Click on WooCommerce and select Product Catalog.

Step 3: Navigate to the shop structure options and enable the button next to “Enable Sticky Sidebar”.

Currently, we do not have a sticky sidebar feature available for blog posts or blog archives. However, we take feedback from our users very seriously and we will be working on this feature as soon as we can. As an alternative, you might consider using an external plugin to get the job done! Please take a backup of your website before using any external plugin. Here is an article that will guide you through the process.

This article will help you to understand how to get started with available options with Astra Footer Builder.

Getting Started

Once you have the Astra theme installed, go to the Astra Dashboard page under Astra > Dashboard. Here you can see ‘Footer Builder‘ under the ‘Quick Settings‘ module. Click on it to customize the footer builder.

Once you are in the customizer, you will see customizing options for Footer Builder.

From the customizer settings, you can set the footer elements of your choice based on your requirement. Once you add the footer elements and think of how to add background to those elements, hover the mouse onto the Primary Footer/ Above Footer / Below Footer and then click on the settings icon.

By clicking the settings icon, you will navigate to the respective Footer customizer options. Navigate to the ‘Design’ tab, where you find the option to set the background color/image/gradient to the primary footer.

But sometimes you might have a logo image of perfect size and need to display it without cropping. In this case, you can use the following filter to disable default cropping by Astra. This filter will disable cropping by Astra. The exact logo image will be uploaded as the logo. If you need to resize it, you will need a custom CSS.

add_filter( 'astra_resize_logo', '__return_false' );

Add the above filter into the child theme’s functions.php file. If you are not sure, how to do this, here is an article that will guide you through.