How To Change Mobile Menu Content Alignment Header Builder Astra Theme

YouTube video

The alignment of content in your website’s mobile menu is not just a matter of aesthetics; it’s about improving readability and user experience. In the Astra Theme for WordPress, adjusting the content alignment in the mobile menu can help your site look more organized and professional on mobile devices. This guide will show you how to change the content alignment in the mobile menu using the Header Builder feature of the Astra Theme, allowing you to align the menu content to the left, center, or right as per your design needs.

  1. Log into WordPress Backend: Begin by accessing the dashboard of your WordPress website. The dashboard is where you control all the aspects of your website, from content to appearance.
  2. Navigate to Astra Settings: In your dashboard, look for ‘Astra’ in the left-hand side menu bar. Click on it to access the settings dedicated to the Astra Theme.
  3. Enter Theme Customizer: Inside the Astra settings, find and click on ‘Go to Customizer’. The theme customizer is a powerful tool that allows for a wide range of adjustments to your theme’s appearance.
  4. Access Header Builder: Once in the theme customizer, locate and select ‘Header Builder’. The Header Builder in Astra lets you customize the header of your website, including the mobile menu.
  5. Switch to Phone View: Ensure you are editing the mobile menu by toggling to the phone view in the theme customizer. This step is crucial to ensure your changes apply specifically to the mobile version.
  6. Adjust Off Canvas Settings: Find the ‘Off Canvas’ text and click on the settings icon next to it. The Off Canvas menu is where you manage settings for the mobile menu.
  7. Change Content Alignment: In the Off Canvas settings, locate the ‘Content Alignment’ option. Here, you can change the alignment of the content within the mobile menu. Choose from left, center, or right alignment to match your site’s design and improve the mobile user experience.
  8. Publish Your Changes: After selecting your preferred content alignment, click ‘Publish’ to save and apply your changes. This will update the content alignment in your mobile menu.

Adjusting the content alignment in your mobile menu with the Astra Theme is a simple yet effective way to enhance the appearance and usability of your website on mobile devices. By following these steps, you have made a significant improvement to the mobile user experience, ensuring that your menu is both aesthetically pleasing and easy to navigate. Always review your changes on a mobile device to ensure the alignment is effective and enhances the overall mobile browsing experience.