Customize Your Header

In this lesson we are setting up the parent theme header area. These global settings will show on all pages of your website.

Customizing the Theme Header:

  • From the WordPress dashboard, scroll down and click on ‘Appearance’, then ‘Customize’ in the WordPress sidebar.
  • Click on ‘Header’.
  • Click ‘Header Presets’.
  • Choose the correct menu layout as seen below.
  • Click the back arrow on the top left.
  • In the quick links area, choose ‘Change Logo’.

Logo & Site Identity:

  • Click ‘Select Logo’.
  • Add a copy of your logo with a transparent background. If you only have one with a white background, check with your branding designer about getting a copy without a background. It’s a great asset to have for forms, etc.
  • Add your website title & tagline.
  • Turn off the ‘Show Site Tagline’ & ‘Show Site Title’ choices by sliding the toggles.
  • Set the logo max width to 150. If that looks super small with your logo, you can change this a bit, but I’d keep it at 200 or under.
  • Add a copy of your icon with a transparent background. Again, a transparent background is best, but don’t stress if you have to use copies of the logo or icon with a white background.

Menu Choices:

  • Click the back area and change menu choice.
  • Click ‘Style’ (see pic below).
  • Change the ‘Items Color, “Active Item Color’, and ‘Items Hover Color’ to #FFFFFF
  • Open the Typography section by clicking on it.
  • Change the font family to Montserrat.
  • In the font size area type in 1.2 or click the up arrow twice to change it.
  • Hover near the ‘Primary Menu’ in the large window (see pic below) and click the gear when it pops up.
  • Hover near the ‘Primary Menu’ in the large window (see pic below) and click the gear when it pops up.
  • After the ‘Header Bottom’ menu opens, under the ‘Layout’ tab choose ‘Full Width’ from the dropdown menu.
  • Next click the Style tab, then click text color and change the color #000000 to #ffffff.
  • On ‘Row Background’ click the white square by the globe next to ‘color’ and change the color code from #000000 to #526569.
  • Click the back arrow to the main customizer menu.
  • Scroll down to the ‘Additional CSS’ choice and click.
  • Copy and paste the code below next to the number 1.

.wpforms-form button[type=submit] {
background-color: #526569 !important;
border-color: #526569 !important;
color: #fff !important;
}

.wpforms-form button[type=submit]:hover {
background-color: #526569 !important;
}

  • Click ‘Publish’ on the top right of the Customizer sidebar.