Insert markup on mobile header

Here is how you can insert HTML markup or a shortcode inside the mobile header.

Create a Hook element and write your markup, eg:

<a class="call-to-action" href="tel:012120827238"><span class="dashicons dashicons-phone"></span> 0121 20827238</a>

To integrate a shortcode, make sure you have the checked the Execute Shortcodes option in the Settings.

Finally, select the inside_mobile_header hook and make sure Location is set to Entire Site in the Display Rules settings.

inside_mobile_header hook - Settings
inside_mobile_header hook – Settings
inside_mobile_header hook - Display Rules
inside_mobile_header hook – Display Rules

In this example, I made use of some HTML markup to add a dashicon. To learn how to add dashicons in WordPress, read this article.

You might need to add additional CSS, for example to center the markup between the mobile site logo and the mobile menu:

.mobile-header-navigation .call-to-action {
	order: 2;
	color: #FFF;
	margin: 0 auto;