Archived topic
Phone number in the header
11 replies · Started by chris on May 7, 2020
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
Hi there,
you can use the Header Widget area to add your HTML in that position.
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
You're welcome
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
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 :)
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
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
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
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
Sweet, I will do that! Thanks for all your help, was very useful to know
No problem :)
