Astra – Customize the submenu

Make the menu on your website look attractive and extraordinary. Customize the appearance of the dropdown sub-menu according to your taste, setting different options while using the Astra theme.

WordPress Sub Menus

This document shows how to use and customize the WordPress Sub-Menus and Drop-Downs menu items easily. A sub-menu or drop-down menu appears when you have some pages under the main menu item layout and hover over this main page item on the navigation menu.

Please ensure you have built your ‘main menu’ for a better start point.

How to build a simple menu item drop-down?

For building a simple menu dropdown, you just need to go on your WordPress Dashboard > Appearance > Menus > create the menu and simply drag/drop the menu items under the main navigation menu page, as shown in the attached image below.

NOTE: Make sure you click on the ‘Save Menu’ button to save your changes.

Customizing the Submenu 

If you are using the Astra theme and your navigation has multiple levels, you might look for a way to modify the appearance of the sub-menus — the dropdown menu items. In this article, you’ll find a detailed walkthrough on how to customize submenus. Learn more about how to change the width, the position, and even how to add the hover effect–it’s all in here.

To customize the sub-menu, go to Appearance > Customize > Header Builder > Primary Menu > Design > Sub menu Container Options. Under the styling options, you can see various options related to divider size, top offset, submenu animation, border, sub menu color, and many more.

Let’s discuss all the possible options here.

Divider size and Color

You can add the divider between all sub-menu items using this divider option. Also, you can set the width and color for the divider here.

Top offset

You can set the top offset value of your choice here.

Submenu Animation

It applies entry animation to the submenu container when the user hovers the parent menu. Animation styles are Slide Down, Slide Up, and Fade.

Border width and Color

Set border width and color to sub-menu items here. 

Box Shadow

Make use of the option to set the box shadow to the sub-menu items.

Menu Color

Once you have your menu layout how you like it, it’s time to customize it with color tweaks. Use the Text/Link Color option to customize the color of your menu links while normal, hovered, and when it’s the active page. Use the Hover and Active icons to edit the different states.

Menu Font

You can edit the text color and typography settings of the menu items. 

Text Color: Choose the color of your text.

Typography

Family – Choose your font family

Size – Choose a size for your font (px, em)

Weight – Choose the weight of the font

Transform – Choose the Transform properties for the font

Line-Height – Use the slider to set your line-height

Menu Spacing and Margin

The padding for your menus refers to the space outside your menu. Use the padding controls to increase the separation between your menu and other elements in the header or footer.

Sub menu Color

Use the Text/Link Color option to customize the color of your sub-menu links while normal, hovered, and when it’s the active page. Use the Hover and Active icons to edit the different states.

NOTE: This option is available when you are using the Astra Pro plugin.

NOTE: The information mentioned in this document is for the regular header. If you enabled the Transparent Header, then configuring the submenu needs to be done from the Transparent Header.

To do so, Navigate to Appearance > Customize > Header Builder > Transparent Header > Design and make the customization here.