Author 诗语

Nav Menu Module [Create a Mega Menu]

The Nav Menu Addon enables you to add and create Mega Menus. Mega Menus are a type of expandable menus where different choices are displayed.If you own a website with a lot of options and lower-level subpages, then this is the perfect option to display these at a glance.

Astra provides stunning features to design Mega Menu functionality with Nav Menu addon.

This is a premium feature available with the Astra Pro plugin. To use these addons, you need to have the Astra theme installed along with the Astra Pro plugin on your website.

If you want to learn more about how that』s done here』s a walk-through video made by WPBuilders.

Activate the Module

Please follow these steps to activate the Nav Menu module and explore its options – 

Step 1 – Make sure you have the Astra Pro plugin installed and activated. 

Step 2 – Activate the add on from the WordPress Dashboard > Appearance > Astra Options > Nav Menu

Create the Mega Menu

If you want to create a Mega Menu, you need to enable the Mega Menu functionalities for the top-level menu item whose child menu items you』d like to turn into a Mega Menu. 

Follow these steps to do just that:

Step 1 – From the WordPress dashboard navigate to Appearance > Menus.

Step 2 – Select the menu item under which you want to add a mega menu.

Step 3 – Expand this menu item and click on the 「Astra Menu Settings」 button

Mega Menu Tick the checkbox for the Enable mega menu option. This will enable the mega menu options for all submenus of the parent menu. It provides options for the top-level/parent menu. You can set a Mega Menu width to content, menu container or full.

Mega Menu width – Set the width of your mega menu here. These are available options:Content – set the menu width to your content widthMenu Container Width – limit the width of your Primary menu Full Width – set the width of your mega menu to the width of your screen but limit your menu content to the content width.Full Width Stretched – set the width of your mega menu to the full width, edge-to-edge.Custom Width – set the custom width value in pixels

Background Color / Image Background Color/ Image will be set to the mega menu box for the parent menu. You can adjust the background image with settings like Background Repeat, Background Size, and Background Position.Override Colors for this mega menu? You can set colors for the menu items present in the mega menu box for the parent menu. Available options are Text/Link Color, Text/Link Hover Color, Column Divider Color.Highlight LabelsThis is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured, etc. You can set label text and color.AdvancedYou can set Margin and Padding for the menu items.

Step 4 – Clicking on the child menu you will show you the following options –

Mega Menu Make column heading?: Choose this if you want to make the menu item navigation label as a title for the column. So that this will appear as a title and all child menu items will appear below this heading. Note: Make sure you have enabled the Mega Menu for the Parent Menu item to see this option.Menu Label Hide Menu Label/Description?: If you want to hide the label or description for the submenu, select this option.Disable Link: This option will remove the link for a respective menu item. It will display only the title of the menu.Content Source You can select Content Source for the submenu. It has the option to select from Custom Text, Template or Widget. You can display custom text/HTML with the editor, or can select any custom template/widget. If you select the Custom Template option, a list of all available posts, pages, custom templates will appear. If you select the widget option, a list of all available widgets will appear.Highlight Labels This is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured, etc. You can set label text and color.

Similarly, you will find options for all submenu and their submenu.

How to Create Columns for the Mega Menu?

Astra will automatically create a separate column for each submenu. When you tick the option to Enable Mega Menu within the Parent menu item, it will create columns depending on the number of submenu items present under it.

For Example – If you have the following menu structure:

Background Image

BUSINESS PAGES

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

AGENCY PAGES

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

UTILITY PAGES

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

SPECIAL PAGES

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

It will display on the front end as –

How to use RGBA color picker?

There are several color formats you can use with the Astra Theme. Though you might be most familiar with HEX codes (e.g. #FFFFFF for white color), you might have noticed that your color picker offers also RGBA format (Red, Green, Blue, Alpha). We have added an RGBA color picker for most of the Customizer settings, to help you add transparency easily.

You can use the RGBA color picker on any color setting that supports it with just a few clicks:

Step 1 – Navigate to the desired setting that you wish to edit, and click on it to open the color picker;

Step 2 – Click on the icon for circling between the available color formats and set it to RGBA;

Step 3 – Once your format is set to RGBA, you can add your color by adding the color values or by dragging the picket on the color scale:

Note:

The selected color doesn』t change when you change the color format. When you change the color format, the color will be automatically shown in the selected format. For example, if you set the white color in HEX format it will be shown as #FFFFFF. If you switch to RGBA the white color will be shown as rgba(255, 255, 255, 1)

Step 4 – You can add transparency to your color by either sliding the transparency bar or by modifying the Alpha (a) value between 0 and 1:

Note:

Sliding the transparency bar will automatically switch your color format to RGBA.

Keep in mind that setting the Alpha value to 0 will make it completely transparent and not visible, while setting the value to 1 will remove the transparency.

Feel free to check the video below to see this feature in action:

Font Selection

Typography is probably the most important aspect of a well designed, UX focused website. So Astra offers various typography controls and options for fonts. In this article, let』s see what are the options for fonts in Astra.

System Fonts

Typography options in the customizer.

Astra, out of the box uses System Fonts. As System fonts are installed and available on user』s computers, they don』t rely on third-party services and load fast.

Depending on the user』s device and operating system, the theme loads one of the fonts from the list below. For this, in cutsomizer 「Inherit」 option should be selected.

Apple System, Blink Mac SystemFont, Segoe UI, Roboto, Oxygen Sans, Ubuntu, Cantarell, Helvetica Neue, Sans Serif

Whereas it also offers the option of the System fonts below:

Halvetica, Verdana, Arial, Times, Gorgia, Courier

Google Fonts

Google Fonts is the largest directory of free and open source web fonts. At the time of writing this article, it offers 848 font families; and Astra has all of them built-in.

Before releasing each update of Astra, our build process automatically checks all Google Fonts and lists them in Customizer options. If there is a Google Font that you can』t find in the options, probably the font is very new and it will be included with the next update of the Astra theme.

Typekit Fonts

Typekit is another directory that offers free as well as premium fonts. To use a font from Typekit with Astra theme, we have built a free plugin called 「Custom Typekit Fonts「. Once installed, just enter your unique Kit ID; and it will automatically list all the fonts from your Typekit account to theme customizer options for you to select. No code required!

Custom Font Files

If you have a custom font file that you would like to use for your website, you can use our free 「Custom Fonts」 plugin. After installing it, you can upload your font file from the WordPress backend and see it available in the Customizer options. Again, no code required! You can check our article on how to use the Custom Fonts plugin and follow simple step-by-step instructions.

After all, fonts do matter, right?

How To Create a Header With a Centrally Positioned Logo With Astra?

The Astra Theme comes with the visual drag-n-drop Header Footer Builder. The Header Footer Builder brings a lot of freedom when designing your headers and footers. One of the interesting designs that can be achieved with Header Builder is creating a header with a centrally positioned logo. And you only need a couple of minutes to do this.

Following the easy steps in this article, you can expect the end result like the one in the screenshot below – a header that displays your logo in the middle with your menu items distributed on the left and the right side.

How To Do This?

To achieve this header design with the Astra theme, you will need to use Header Builder and three elements:

Site Identity & Logo

Primary Menu

Secondary Menu

No matter if you started building your website from scratch or imported one of our Starter Templates, the default header setup you will most likely see in the Header Builder consists of the 「Site Identity & Logo」 element on one side, coupled with the 「Primary Menu」 element on another:

To start building your header with a centralized logo, let』s first create your menus.

Creating Primary and Secondary Menu

Navigate to Appearance > Customize > Menus (you can also access menu setup via Dashboard). Follow these steps to start building your menus (you will need to build two):

Step 1 – Click on the 「Create New Menu」 button to create a menu:

Step 2 – Name your menu. You can name the menu as you wish. In order to track things easier, we named this first menu 「Left Menu」 as we will add this one on the left side of the Logo in the header

Step 3 – Select menu items you wish to add to the menu. If you need to create any new items, you can simply click on the 「Add Items」 button.

Step 4 – Scroll down to the 「Menu Locations」 section and mark this menu as 「Primary Menu」:

Step 5 – Return to the Appearance > Customize > Menus and repeat steps 1 to 3 to create your second menu. We named this menu 「Right Menu」 but you can name it as it suits you:

Step 6 – Scroll down to the 「Menu Locations」 section and mark this menu as 「Secondary Menu」:

Build Your Header

Now that you』ve created your menus, navigate to Appearance > Customize > Header Builder and follow these steps to create your header:

Step 1 – Add your 「Site Identity & Logo」 element to the middle section of the Primary Header, and add your Logo. The primary header is the middle header in your visual header builder:

Step 2 – Finally, to create your header with a centrally positioned logo as previously shown, add your Primary and Secondary Menu elements. Click to the left section of the Primary Header and add the Primary Menu element. Click on the right and add the Secondary Menu too. Click 「Publish」 to save your header.

Note:There is no difference if you add a Primary or Secondary Menu element to the left or right side. This will just reflect on the position of your menu items in the header.

Alternatively, you can position menus closer to the sides of your website by moving (drag-n-drop) Primary and Secondary Menu elements:

Step 3 – This step is optional and it will depend on your Logo design and other Site Identity options (if you activated Site Title or Tagline). You can add margins to your Site Identity & Logo element to make your logo equally distanced from both menus. Using percentage (%) as a size unit will make sure this distance looks good on all screens.

What Is a Child Theme and How To Install It for Astra?

What Does Child Theme Mean?

A child theme is the exact replica of the parent theme that en-queues all functionalities and styles from the parent theme. The main use of the child theme is to allow customization in the theme files. Any changes you make on the theme files directly will be erased when you update the theme.

That is why we recommend using a child theme when you need to override any theme templates or add code for custom functionality. When you use the child theme, any theme customizations you make there will not be affected by the theme updates.

How To Install Astra Child Theme?

With Astra, you will get a ready-to-use child theme, so there is no need to create it yourself. To download and install your Child Theme, all you need to do is visit Child Theme Generator follow these steps:

Step 1 – Enter the name you wish to give your child the theme;

Step 2 – If you want to add your own branding, click on advanced options and where you can edit the Theme name, version, author, author URL, description, folder name, and screenshot;

Step 3 – Once done, click on Generate. The child theme you just generated gets downloaded on your computer as a .zip file.

Let』s Install Your Astra Child Theme Now:

Step 1 – Now that you have your child』s theme file, log in to your website Dashboard and navigate to Appearance > Themes > Add New;

Step 2 – Click on the 「Upload Theme」 (located on the top of the page), choose the .zip file of your child theme, and click on the 「Install Now」 button;

Step 3 – Activate the Child Theme. Keep in mind that though the Child Theme is the active theme, it can』t work without its parent theme – Astra. Thus, you need to have both themes (Astra theme and your Child theme) installed.

Feel free to copy any necessary Astra theme files in this child theme and customize them as you need, as not all of these will automatically be transferred to the Child Theme (for example, Additional CSS you might have added to your parent theme).

Here is a nice video made by Davinder on Learn @ BasicWP that explains the steps in detail.

Some Pro Tips:

If you would like to learn more about the child themes in general, check this nice article on Smashing Magazine.To load unminified files of the Astra theme, use SCRIPT_DEBUG Constant.

Related Links:

How to add custom code to child theme』s functions.php?How to edit style.css in a child theme?

Responsive Editing With the Astra Theme

The importance of mobile devices, though already enormous it』s getting higher still. Thus, when designing your website, it』s essential that your design is responsive and stays consistent on all screen sizes. This document will help you use the Astra Theme built-in responsive editing options.

With these options, you can adjust settings throughout your website so it looks perfect on Desktop, Tablet, and Mobile.

Responsive Editing

Having that the difference between desktop and mobile phone screens is quite big, it is very hard (almost impossible) to create a single website design that will look perfect on both and all screen sizes in between. This is why you must design your websites to be responsive.

Responsive editing means that you need to modify your website design separately for desktop, tablet, and mobile to make it look equally good on all of these screens. Mostly, your website content is added using Page Builders, and all of them are equipped with responsive editing options.

You will be able to do the same for the most of the theme-related settings as Astra comes with these options built-in. Ina ddition, It』s easy to know which options can have responsive editing enabled as you will see a responsive editing icon next to them.

Previews

When your website is responsive, the browser will display different designs following the breakpoints. The breakpoint is the specific screen width, set to serve as a point which the browser uses to distinguish desktop, tablet, and mobile screens.

You can switch between Desktop, Tablet, and Mobile preview to edit and preview your website design on different devices. To do this, you can use the responsive editing icon:

Step 1 – Navigate to the setting that you want to edit. Look for the responsive editing icon next to it;

Step 2 – Click on the icon to circle between desktop, tablet, and mobile device settings – choose the preview you need to edit.

Alternatively, you can change the preview by using the default buttons at the bottom of the Customizer.

Size Units

The important factor in responsive design is the size unit being used, as each unit reacts differently to changing the screen size.

There are three available units: PX, EM, and %. So what is the difference between these three?

The pixels (PX) are often used for their precision. Having that 1px is a relatively small unit, you can easily adjust the size just as you imagined. Also, it』s an absolute unit, meaning that it always appears precisely the same and is not influenced by other website elements. For example, a margin set to 20px will always take this same space on any element.

On the contrary, both EM and percentage (%) are relative units. This means that they change depending on their parent elements (like body, header, footer, sections, rows, columns, widgets/blocks, etc.):

EM is a unit relative to the parent element font size. For example, if you set your heading (parent element) font size to 20 px, setting spacing of 1 em for that heading will be equal to 20 pixels. Changing the font size will change the spacing automatically.A percentage (%) is a unit relative to the parent. This means if you set your logo (parent element) width to 150 px, setting the 20% margin will add spacing of 30px. Thus, If you change the width of your logo, the spacing will adjust proportionally.

It』s important to mention that some Customizer options are using only a specific size unit. Accordingly, these options don』t have the possibility of choosing the size unit.

Responsive Settings With Astra Customizer

Responsive settings are available in almost all Customizer options (only Sidebar and Performance options have no responsive settings). These are the types of settings that you could use with the responsive editing capability:

Font Size & ColorsBorder ColorIcon Size, Color, and SpacingBackground Colors, Overlays, and ImagesPaddingsMarginsAlignments

How To Do This?

You can add responsive edits to the Astra Customizer options, by following these general steps:

Step 1 – Access the Customizer. When accessing the Customizer, it will be by default set to the desktop preview;

Step 2 – Navigate to the location of the option you wish to edit;

Step 3 – Using the responsive editing icon next to the settings, circle between the desktop, tablet, and mobile preview to select the one you wish to edit. We would suggest starting from the desktop as some settings could be automatically inherited by smaller viewport sizes (for example, font or background colors);

Step 4 – Edit your settings separately for desktop, tablet, and mobile. Click 「Publish」 to apply changes.

As an example, we will show you how to make your Breadcrumbs look different for each viewport size:

Step 1 – Navigate to Appearance > Customizer > Breadcrumbs and activate your Breadcrumbs in the General tab;

Step 2 – Click on the Design tab and do your settings as needed. For this example, we decided to have the Breadcrumbs background color set to black and font color to white for the desktop preview:

Step 3 – Switch to Tablet preview either by clicking on any responsive icons on available options or the Table Icon at the bottom of the Customizer;

Step 4 – Add settings for the tablet. In the screenshot below, you can see that in our example, we decided to have a white background with Breadcrumbs font set to black for tablet:

Step 5 – Switch to mobile preview, and apply changes for your mobile settings. In the example, we decided to change only the color of the last item in the breadcrumbs path (the current page; 「Text Color」 setting) to make it stand out on mobile. We also added top and bottom spacing for mobile.

Responsive Header and Footer

With Astras』 Header Footer Builder, you can also make your header and footer responsive and have them look differently for desktop and mobile devices:

Set different Logo WidthSite Title & Tagline Font and ColorSet different Header and Footer HeightsAdd different widgets to your header or footer for each viewport size.Reorganize and position the elements differently

Hiding Elements

The 「Hide on」 option is available for all header and footer elements. It』s also available for each header and footer section (Primary, Above, and Below). You can hide the element or header/footer section on any of the previews using this option.

One of the examples where this option could be helpful would be showing different active elements for tablet and mobile preview in your header or footer: Step 1 – Navigate to the header or footer builder (Customize > Header Builder or Customize > Footer Builder). Since your header and footer are linked for tablet and mobile viewports, these viewports will have the same elements active;

Step 2 – Switch to the viewport where you need to hide an active element;

Step 3 – Click on the element, end enable the 「Hide on」 option to hide it.

Manage Your Site Identity With Astra』s Header Builder

Your Logo and other Site Identity options are directly related to the presentation of your brand. As they are part of your header, these are visible on all pages and posts thus they help users always be aware of the website and brand they are interacting with.

The Astra Theme comes with a drag & drop Header Footer Builder. With Header Builder, you can manage your site identity using the Site Identity & Logo element. This document will show you how to easily set your Logo and other Site Identity elements. These include:

Logo

Retina Logo

Logo for mobile devices

Site Title

Site Tagline

Site Icon (Favicon)

You can find the Header Builder by navigating to Appearance > Customize > Header Builder. To access the element settings just click on the element in the elements list on the left, or in the visual header builder under the preview.

Logo

You can add your Logo under the General tab. To add or change your logo, you can follow these steps:

Step 1 – Click on the Logo area and upload a file or select a logo from your Media Library. You can add logos as JPG, PNG, and SVG.

Step 2 – Though this step is optional, enabling a Different Logo For Retina Devices will ensure your logos look great on devices with retina screens. It』s advisable to upload at least two times larger so your logos won』t be blurred on high-definition screens. You can find out more about the retina logo in this article. If you decide not to use this option, your website will show your primary logo (from Step 1) on retina screens too.

Step 3 – Once your logo is added, you can choose the Logo Width. This will set the size of your logo, as the height will be automatically calculated based on the width. You can also set different logo widths for desktop, tablet, and mobile by clicking the responsive editing icon to switch between these screens.

Step 4 – If your design requires a different logo on mobile devices, you can switch to mobile editing and enable Different Logo For Mobile Devices to add a different logo only for mobile devices. Keep in mind that the mobile logo you set will be used for both tablets and mobile phones. You can find more about creating a mobile header in this article.

Step 5 – You can switch to the Design tab of the element and set Logo margins.

Note:If you enable the Transparent header, you will have a Different Logo for Transparent Logo option, enabling setting a different Logo, Retina Logo, and Logo Width applied only to the Transparent header. This option is available at Appearance > Customize > Header Builder > Transparent Header > General tab.

Site Title and Tagline

Site Title is a name you set for the website, while the Tagline is the short one-line description.

Step 1 – You can make these visible beneath your logo by enabling their respective options within the General tab of the Site Identity & Logo element. You can enable these separately for desktop, tablet, and mobile.

Step 2 – Usually, site title and tagline are added when creating a new website at Dashboard > Settings > General. If you want to modify these, you can do it directly in the element settings without leaving your Customizer.

Step 3 – Also, if you would like to position your site title and tagline on the right side of your Logo, you just need to enable the Inline Logo & Site Title option.

Step 4 – If you switch to the Design tab of the element, you will find the options for changing the Color and Font Size of the Site Title and Tagline.

Note:If you enable the Transparent header, you will have separate options for setting different Title Color used only for the Transparent header. This option is available at Appearance > Customize > Header Builder > Transparent Header > Design tab.

Site Icon (Favicon)

This is a small image icon that can be seen in the tab of a web browser, bookmark bars, and WordPress mobile apps. You can set it with the site icon option. The recommended size for a favicon is 512 pixels. Learn more about Site Icon here.

Disable Debug Mode – Starter Templates

While importing Starter Templates, does the popup says – 「Disable Debug Mode「. If yes, here』s why and how you can clear it.

Why?

This notice pops up if you have WordPress debug mode enabled on your website. This mode helps to catch all errors, notices, and warnings on your website. This might interrupt the import process.

How to Clear?

You can clear this by simply disabling debug mode on your website. To disable it, just add the following line of code in the wp-config.php file. Please add this code before the 「That』s all, stop editing! Happy publishing」 line:

define('WP_DEBUG', false);

Save the file and refresh the Starter Templates interface on the frontend. Try importing the template again.

What is a Favicon or Site Icon?

A favicon; also known as Site Icon is what represents your website in the browser tabs, bookmarks and many other important places. Below are some examples:

To add a favicon for your website:

Prepare image file. It must be square, and at least 512 pixels wide and tall.Go to Administration Screen – Appearance > CustomizeClick Header > Site IdentifyClick Select Image at Site Icon section, upload the image file you prepared in the above step from Upload Files tab screen, and click Select.

If you wish to find out more about editing your Site Identity please visit the following document: 

Heder Footer Builder

Since version 3.0.0. Astra theme comes with the Header Footer Builder already included. If you decided to switch from the legacy (old) header to the Header Builder, the location of your Site Icon settings is slightly different. To locate the Site Icon settings when using Header Builder navigate to Appearance > Customize > Header Builder and add the 「Site Identity & Logo」 element to your header. Click on the element to open the settings. Within these settings, you will also be able to set your Site Icon. Check more details in the related article.

How to Add Logo, Favicon and Site Title with Astra?

To learn more, visit WordPress Codex.

Toggle Button for Desktop – Header Builder Element

The toggle button is an attractive way to display content like menu, button, search, etc. in the header on the desktop view. It is specially designed for desktop screens and it works similar to the mobile hamburger button.

When a user clicks on the toggle button, it brings an off-canvas window on the screen with all content you added inside.

As it needs a small space in the header, this is a great way to display content in the header.

This beneficial Header Builder element is a premium Astra feature and available since Astra Pro version 3.3. Before this version, you were required to use custom code to bring a toggle button on the desktop. But not anymore!

Now you can easily display off-canvas content on desktop and customize it completely with the new Toggle Button element.

Here is a video that explains how to use this element:

If you prefer a written version, let us dive in!

How To Add Toggle Button for Desktop

As this is a premium feature, make sure to have the Astra Pro plugin updated and activated. Follow the below steps:

Step 1: Open Header Builder and click on a section where you wish to add a toggle button. From the element list, choose Toggle Button.

Step 2: Now you can choose content i.e. elements to display inside a window that appears when users click on the toggle button.

You will observe the off-canvas section in the header builder as soon as you add the toggle button.

Click on the off-canvas section and a list of elements will open up.

Choose the required elements from this list and they will be automatically added to the off-canvas section. You can add various elements such as buttons, search, widgets, HTML, social icons, the off-canvas menu, and so on.

To customize these elements simply click on them and all customization options will open up in the customizer.

Note:

To add a menu inside the off-canvas section, use the Off-Canvas Menu element from the list. The primary and Secondary Menu will not work inside the off-canvas section.

By default, the off-canvas menu will display all pages on your website just like the default WordPress menu. You would need to create a dedicated off-canvas menu or assign any existing menu as an off-canvas menu.

If you are not sure how to create and assign off-canvas menu, here are the steps –

Click on the Off-Canvas Menu In the customizer, click on 『Configure Menu from Here』From the 『Off-Canvas Menu』 dropdown, select the required menu. If the required menu is not in the list you can even 『Create New Menu』 and assign it as off-canvas.

Step 3: Once you add all required content inside the off-canvas section, you can design the toggle button as per your choice.

To customize the toggle button, click on the button in the header builder and all design options will promptly open in the customizer.

Once there, you can set the following:

Icons – Choose from three different designsToggle Button Style – Choose from three pre-built styles for button Menu Label – You can add a label for the menu button here.

Click on the Design tab to set the size, color, margin for the toggle button.

Step 4: You can customize the off-canvas window and set the layout and colors for it. To do so, click on the gear icon for Off-Canvas, and the options will open up in the customizer.

Under the General tab you can set the type, and position alignment, while under Design tab you can set the colors and spacing.

Note:

If you switch to tablet or mobile devices in the customizer, you will observe an off-canvas section. Note that the off-canvas section with the toggle button on a desktop, on a tablet device, or on mobile devices works separately. This allows you to design different toggle menus on different devices. Off-canvas from desktop will not be automatically inherited on a tablet or mobile devices and vice-versa.