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.

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;
}

Need help on customizing GeneratePress or GenerateBlocks?

Get in Touch

Helpful info

Adding CSS

Adding PHP

Using a child theme

Keep up to date with newly released articles

Sign up to the Knowledge Base newsletter

Please leave this field empty

First name

E-mail *

You will only receive an email when new content is added in the Knowledge Base. No spam, that's a promise!

Thanks for subscribing! Please, check your inbox or spam folder to confirm your subscription.