Astra theme is one of the best and most popular free WordPress themes today. However, no matter how rich the features of the free version of the theme, there are some features and settings that do not appear on the Customize dashboard. One of them is the option to change the color of the mobile submenu arrow icon in the mobile view.
From our exploration, for example, we did not find this option in the settings in the Off-Canvas Menu or Off Canvas section. Instead, we looked for it in the Toggle section of Astra’s header builder in mobile view, and couldn’t find the option we were looking for.
Therefore, the main option in changing the color of the sub menu arrow in mobile view is to add CSS code. With this code, you can change the arrow color to suit your preferences. So, how to change the color of the Astra free theme submenu arrow icon with CSS code? Follow our explanation.
Change the color of the Astra free theme submenu arrow icon with CSS
Changing the arrow color in the sub-menu is very easy if you have the right CSS code. Follow the steps as follows:
1. Login to the site that has the Astra Free WordPress theme installed.
2. Select Customize in the dashboard menu then click Additional CSS which is generally at the bottom of the Customize menu.
Read: How To Create a Sticky Header for Astra Free WordPress Theme
3. Then enter the code below in the area (additional CSS) to place the CSS code.
ast-header-break-point .ast-icon.icon-arrow svg {
color: #ffffff;
}3. Select header builder in Customize > change to mobile view and see if the arrow color of the submenu dropdown has changed.
Read: HTML Tag Verification Lost or Deleted and How To Find It
For the record, make sure again if the code changes or not because of the updated theme. If so, then you can check the code again on the site using Inspect.
That’s how to change the arrow color in the sub-menu section of the Astra Theme Free version. Hopefully this information is useful for Astra theme users.
