{"id":70286,"date":"2020-11-25T16:17:22","date_gmt":"2020-11-25T10:47:22","guid":{"rendered":"https:\/\/wpastra.com\/?post_type=docs&p=70286"},"modified":"2025-09-24T22:05:12","modified_gmt":"2025-09-24T16:35:12","slug":"create-mobile-header-with-header-builder","status":"publish","type":"docs","link":"https:\/\/wpastra.com\/docs\/create-mobile-header-with-header-builder\/","title":{"rendered":"How To Create Mobile Header With Astra Header Builder"},"content":{"rendered":"\n

Astra Header Builder provides a dedicated option to design a mobile header. These options are available with the Astra theme out of the box, while advanced configuration options are available with Astra Pro. <\/p>\n\n\n\n

Refer article here <\/a>to know how to get started with Astra Header Builder. <\/p>\n\n\n\n

Editing Mobile Header <\/h3>\n\n\n\n

Once you switch to the Header Builder<\/a>, visit the Customizer. <\/p>\n\n\n\n

Step 1 <\/strong>– Click on the Header Builder to start editing.<\/p>\n\n\n\n

Step 2<\/strong> – Switch to Tablet or Mobile View in the Customizer. <\/p>\n\n\n\n

\"Switching<\/a><\/figure>\n\n\n\n

Step 3<\/strong> – You will observe a separate dedicated box for a mobile header in the visual header builder. Off Canvas section allows you to configure header items inside the toggle button. While visual builder on the right side lets you configure all parts of the mobile header – you set separately your Primary header (middle), as well as Above, and Below headers. Usually, you would have your logo and toggle button in your Primary header here, but there are actually no limits to where you can place elements in your mobile header. <\/p>\n\n\n\n

\n