Conditional text for Header Contact Info

Hello again, and thank you for the theme and the speedy support.

Couple of questions:

  1. I am using Sydney Pro and using the Header Contact Info.
    Is there a way to render one set of value for desktop and one set of values for mobile?

For example, on desktop, I want the following values to show in the header contact info:

Email: me@email.com
Phone: 555-1234
Address: 123 Main St, The Moon 99192

And on mobile, I only want to show
Phone: 999-9876

  1. Same question, but for custom text. I followed the instructions here (Call To Action in Header) to add a call to action button above the header area. Is there a way to make the CTA conditional on desktop vs. mobile? For example - add a button that says “Hello” and goes to URL1 for desktop, and “Bye” with URL2 for mobile?

I apologize in advance for the lengthy questions. I am not a web/css/js guy and can use all the help I can get.

Thank you in advance.

Hey there. Sorry, I’m just some random guy who uses the same theme as you, happen to have been doing web development for 20 years :grinning:

I’d recommend looking up Media Queries in CSS. The website css-tricks.com is a great resource. It is not hard to hide and show things based on the size of the screen.

Hello,

  1. a) Try to use the following CSS code to hide email and address on mobile resolutions. You can add CSS code in Customize → Additional CSS section.
@media (max-width: 1024px) {
	.header-contact-info .header-email,
	.header-contact-info .header-address {
		display: none;
	}
}
  1. b) You can try to change phone number on mobile resolutions with jQuery. First, please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code. Then go to your Dashboard → Settings → Insert Headers and Footers → add the following code to Scripts in Header section, and click Save button.
<script>
    jQuery(document).ready(function(){
        if(jQuery(window).innerWidth() <= 1024){
            jQuery('.header-contact-info .header-phone a').html('1234567890');
            jQuery('.header-contact-info .header-phone a').attr('href', 'tel:1234567890');
        }
    });
</script>
  1. Please create a new topic for your second issue to keep forum in good order and make it easier to help you.

Kind Regards, Roman.

Perfect. Thank you both!!

You are welcome! :slight_smile:

Kind Regards, Roman.