Call to action in header for mobile vs desktop

Hello again.

This is my site: https://tinyurl.com/y3ev6chu

I saw and implemented the solution here: Call To Action in Header

But I need some help to achieve a different behavior depending on screen size - so that it behaves one way on desktop and another on mobile.

The current code I have:

Header
in style element:

    a.top-cta-button-hover{
      font-size: 1em;
      padding: 0.5em 1em;
      line-height: 1em;
      background: #d65050;
      color: #ffffff !important;
      border: 1px solid #d65050;
      border-width: 1px 0;
      -webkit-border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      border-radius: 0.25em;
      text-shadow: 0 1px 0 rgba(0,0,0,0.05);
    }

    a.top-cta-button-hover:hover{
      background: #da6161;
      border-bottom-color: #d54c4c;
      color: #ffffff;
    }  

    @media only screen and (min-width: 768px){
      .header-contact .container{
        position: relative;
      }  
      .top-cta-wrapper{
        position: absolute;
        top: -4px;
        right: 0;
        display: table;
      }  
    }

    @media only screen and (max-width: 767px){
      .header-contact .container{
        text-align: center;
      }  
      .top-cta-wrapper{
        margin-top: 15px; 
      }  
    }
    }

**Footer **
in script:

    jQuery(function($) {
      var headerContact = $('.header-contact .container');

      var ctaBtn        = '<div class="top-cta-wrapper">'+
                          'Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a><br>'+
                          '</div>';

      if ( headerContact.length ) {
        headerContact.append(ctaBtn);
      }  
    });

I need to implement the following for desktop:

and for mobile:

image

Any idea? Would appreciate any and all help here.

Thank you!!

Hello there,

Try updating jQuery code with this one:

    jQuery(function($) {
      var headerContact = $('.header-contact .container');

      var ctaBtn        = '<div class="top-cta-wrapper">'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '</div>';

      if ( headerContact.length ) {
        headerContact.append(ctaBtn);
      }
    });

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .top-cta-wrapper > span {
        display: block;
        margin-bottom: 15px;
      }
    }

Regards,
Kharis

it looks ok if all the strings are short, but once string lengths are larger, there are some serious skews on mobile and it’s not lining up properly.

Can you perhaps show an example of how to define one ctaBtn for mobile and one for desktop, like var ctaBtnDesktop and var ctaBtnMobile and how to instantiate one or the other based on screen size?

Thank you for the help!

Hello there,

Please share your final jQuery code, so I can start with it.

Regards,
Kharis

The final jQuery code is the one that I originally posted. I had to revert the change you recommended because it was off on mobile because of string lengths.

The below is an example to add a button with jQuery code that only be visible on mobile screen.

    jQuery(function($) {
      var headerContact = $('.header-contact .container');

      var ctaBtn        = '<div class="top-cta-wrapper display-on-mobile">'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '</div>';

      if ( headerContact.length ) {
        headerContact.append(ctaBtn);
      }
    });

The difference is only display-on-mobile class name that we’ll use to control its visibility with below CSS code. Add it to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .top-cta-wrapper.display-on-mobile {
        display: none;
      }
    }

For desktop button, use:

    jQuery(function($) {
      var headerContact = $('.header-contact .container');

      var ctaBtn        = '<div class="top-cta-wrapper display-on-desktop">'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '<span>Free Consultation:   <a class="top-cta-button-hover" href="tel:360-876-4123">Call (360) 876-4123</a></span>'+
                          '</div>';

      if ( headerContact.length ) {
        headerContact.append(ctaBtn);
      }
    });

and apply this additional CSS.

    @media only screen and (max-width: 1024px) {
      .top-cta-wrapper.display-on-mobile {
        display: none;
      }
    }

Regards,
Kharis

Not sure what I’m doing wrong, but nothing is showing right now for the CTA.

In the additional CSS I have:

 @media only screen and (max-width: 1024px) {
      .top-cta-wrapper.display-on-mobile {
        display: none;
      }
    }

    @media only screen and (min-width: 1025px) {
      .top-cta-wrapper.display-on-mobile {
        display: none;
      }
    }

and in the footer script, I’m not sure I understand what needs to be there based on the last reply.

Is it this?

    jQuery(function($) {
      var headerContact = $('.header-contact .container');

      var ctaBtn        = '<div class="top-cta-wrapper display-on-mobile">'+
                          '<span>Free Consultation<br></span>':+
   '<span>Seattle office: <a class="top-cta-button-hover" href="tel:206-395-6141">(206) 395-6141</a><br></span>'+
   '<span>Port Orchard office: <a class="top-cta-button-hover" href="tel:360-876-4123">(360) 876-4123</a></span>'+
                          '</div>' +
                          '<div class="top-cta-wrapper display-on-desktop">'+
			                            '<span>Free Consultation:     Seattle office  <a class="top-cta-button-hover" href="tel:206-395-6141">(206) 395-6141</a></span>'+
			                            '<span>  Port Orchard office     <a class="top-cta-button-hover" href="tel:360-876-4123">(360) 876-4123</a></span>'+
                          '</div>';

      if ( headerContact.length ) {
        headerContact.append(ctaBtn);
      }
    });

Or this?

    jQuery(function($) {
      var headerContact = $('.header-contact .container');

      var ctaBtn        = '<div class="top-cta-wrapper display-on-mobile">'+
                          '<span>Free Consultation<br></span>':+
   '<span>Seattle office: <a class="top-cta-button-hover" href="tel:206-395-6145">(206) 395-6145</a><br></span>'+
   '<span>Port Orchard office: <a class="top-cta-button-hover" href="tel:360-876-4125">(360) 876-4125</a></span>'+
                          '</div>' +

      if ( headerContact.length ) {
        headerContact.append(ctaBtn);
      }
    });

    jQuery(function($) {
      var headerContact = $('.header-contact .container');

      var ctaBtn        = '<div class="top-cta-wrapper display-on-desktop">'+
                          '<span>Free Consultation:     Seattle office  <a class="top-cta-button-hover" href="tel:206-395-6145">(206) 395-6145</a></span>'+
                          '<span>  Port Orchard office     <a class="top-cta-button-hover" href="tel:360-876-4125">(360) 876-4125</a></span>'+
                          '</div>';

      if ( headerContact.length ) {
        headerContact.append(ctaBtn);
      }
    });

I don’t know jQuery / scripting syntax.

Thank you again for all the help.

I narrowed down the issue. Whenever I put a new line <br> element, the CTP disappears. Can there by a new line element in the header CTP as written above?

Hello there,

Try adding this CSS code:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    @media only screen and (min-width: 1025px) {
      .site-header:not(.fixed) {
        margin-top: 70px;
      }
      .header-contact {
        height: 70px;
      }
    }
  1. Update

I had to get some devs help with this and it’s done. You can close the thread. Thank you for all the help.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis