Header-fixed to stay when scrolling

regarding thesourcesacramento.com:

How to i fixed the blue header at the very top of the website? I don’t want it to disappear when scrolling but to scroll with the main nav section right underneath it in white.

thanx
-tony

Hello Tony,

To accomplish it, 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( $ ) {
    	'use strict';

    	if( $('.header-contact').length ) {
    		 $('.site-header').css({'margin-top': 0});
    		 $('.site-header .header-wrap').css({'margin-top': 20});
    		 $('.header-contact').remove().clone().prependTo('.site-header');
    	}

    })( jQuery );
  1. Update

Regards,
Kharis

i applied the above code to my sandbox website which you can see here:
https://thesourcesacramento.com/sandbox/

but the code in not perfect. take a look. any ideas?

Hello there,

I visited your sandbox site and I felt we’re almost there. What you we need to do is add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header {
      padding-top: 0 !important;  
    }

    .has-hero .header-contact {
      position: static;
    }

    .site-header.float-header {
      padding-left: 0;
      padding-right: 0;
    }

Regards,
Kharis

ok…it looks much better. also the white bar under the blue bar contracts space on scroll at bottom and not top. see the production website to see what i mean.

thanx
-tony

Hello Tony,

Try adding this CSS code:

    .site-header.float-header {
      padding-bottom: 10px;
    }

    .site-header .header-wrap,
    .site-header .social-navigation,
    .site-header .header-contact-info {
      transition: all 0.3s ease-out;
    }

    .header-right .social-navigation {
      margin-top: 0;
    }

    .site-header.float-header .header-wrap {
      margin-top: 10px !important;
    }

    .site-header.float-header .header-contact-info,
    .site-header.float-header .social-navigation {
      padding-top: 3px;
      padding-bottom: 3px;
    }

Regards,
Kharis

thank you very much for your help. I can now fine tune it from here. on the cal web page i added

    .site-header {
    	top: 0px !important;
    }

in order to get rid of the white space above the blue header bar. however, as a result when logged into wordpress it cuts of part of the blue header bar vertically. I was thinking maybe add “top 0px” to a window object which would take into account the wordpress viewpoint as the over all viewpoint. what do you think? any ideas?