Site Header Template

Editing the Site Header Template

To edit the Template: 

Navigate to Templates > Site Header Template > click "Edit with Elementor."

Editable Content:

  1. Background:
    1. Custom CSS is used to do a few things in the header.
      1. Make the background color change on scroll.
      2. Make the height of the header shrink on scroll.
        1. You can edit this code by going to: Edit Section > Advanced > Custom CSS.
          selector.elementor-sticky--effects{ background-color: rgba(0,0,0,0.75)!important } selector{ transition: background-color 1s ease !important; } selector.elementor-sticky--effects >.elementor-container{ min-height: 60px; } selector > .elementor-container{ transition: min-height 1s ease !important; }
  2. Column 1:
    1. Site Logo Widget
      1. Learn how to change your site logo here: How To Change and Style Your Site Logo & Site Title
      2. Custom CSS is used to make the logo shrink on scroll.
        1. You can edit this code by going to: Edit Site Logo > Advanced > Custom CSS.
          .logo img { max-width: 80px; height: auto; transition: all 0.5s ease; } .elementor-sticky--effects .logo img { max-width: 50px; height: auto; }
        2. In order for this Custom CSS to work, a CSS Classes (logo) has been applied. You can see this by going to: Edit Site Logo > Advanced > Advanced > CSS Classes.
  • Column 2:
    1. *Button Widget
      1. This button is set to only appear on Tablet and Mobile. You can see this setting by going to: Edit Button > Advanced > Responsive.
    2. Nav Menu Widget (using the 'Main Menu' menu).
    3. *Button Widget
      1. This button is set to only appear on Desktop. You can see this setting by going to: Edit Button > Advanced > Responsive.
    4. Icon
      1. This icon's link is set to open the Search Bar Dropdown Popup Template. 

*Responsive Note: 

The button before and the button after the Nav Menu Widget are for the same item (currently Watch Live). If you change one, you'll want to make sure to change the other so that the user is directed to the same location on Desktop, Tablet and also Mobile.