Sticky header contact info on mobile only for all pages


#1

Thank you again for the nice theme and great support.

I am using Header and Footer scripts and implemented the Header Contact Info as you can see (see ***.com).

I need to make this Header Contact Info sticky on mobile, not only on the home page, but when visiting all pages. By sticky I mean that when the user scrolls down, the top of the page still shows the Header Contact Info.

  1. How do I achieve this on mobile only?
  2. If I ever wanted to do this for mobile and also desktop, what do I need to add to question #1 to do this on desktop?

I saw other threads talking about this, but they were too convoluted and didn’t find anything specific to mobile.

Thank you in advance.


#2

Hello there,

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('.header-contact').length ) {
        $('.header-contact').remove().clone().prependTo('.site-header');
      }

    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .site-header {
      padding-top: 0;
    }

    .site-header .header-wrap {
      margin-top: 20px;
    }

Regards,
Kharis


Put the Menu Above the Slider and Have It Scroll