[Support request] Phone number in the header

[chris]

Hey thanks in advance to anyone who can help with this.

I’m trying to add a phone number in the header a bit like this:
https://preview.themeforest.net/item/pool-services-wordpress-theme/full_screen_preview/19213092?_ga=2.170173795.218835725.1586969053-7808023.1581271747

Does anyone know how I might be able to do this? I’m currently using seller from the site library.

Thanks

[David]

Hi there,

you can use the Header Widget area to add your HTML in that position.

[chris]

Hi,
Thanks for getting back to me that’s a good idea.I’ll try that and see how I get on.
Thanks for the help

[David]

You’re welcome

[chris]

Hey,

So thanks for the advice, I found this will help me achieve what I was going for on desktop, however it actually makes the header far too large on mobile, I don’t suppose you know a way that I can not show that particular widget on mobile? Just to be clear I’m using the text widget in the header.

Thanks again

[Leo]

You can use the built-in hide-on-mobile class for that widget:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know if this helps 🙂

[chris]

Hey Leo, thanks for the suggestion. Really helpful.
One bit I’ve having trouble understanding is where this goes, I followed the helpful links you sent over and I did see you can add the hid-on-mobile class in the dropdown of say the navigation.

Currently I’m using the custom HTML widget and I’m not sure where I pop this class in.

Thanks in advance

[David]

As you’re writing your own HTML you can add the class to it.
eg.

<a class="button hide-on-mobile" href="tel:01020202">Desktop only button</a>

If you get stuck share a link to the site so i can see the HTML

[chris]

Amazing, thanks again for your help, that bit of code you provided worked a treat.
I’ve been playing and breaking things 😉 but I’ll get there.

This is what I have a the moment

<li style=”text-align: right;”>Number
<li style=”text-align: right;”><i class=”icon-clock-round”></i>9:00 AM – 6:00 PM / 6 Days
<li style=”text-align: right;”><i class=”icon-mail”></i>lable

Is this what it should be? as I think I’m missing a close.

<a class=”hide-on-mobile”
<li style=”text-align: right;”>Number
<li style=”text-align: right;”><i class=”icon-clock-round”></i>9:00 AM – 6:00 PM / 6 Days
<li style=”text-align: right;”><i class=”icon-mail”></i>lable

[Leo]

Every open tag would need a close.

You can use a site like this to check for you:
https://validator.w3.org/#validate_by_input

[chris]

Sweet, I will do that! Thanks for all your help, was very useful to know

[Leo]

No problem 🙂

[Author]

Posts