Harper - Sticky navigation tweaks

Harper features a sticky header that includes your site title, navigation menu (either the Header Right menu or Below Header menu – whichever is active), and social icons. Below, we'll go over ways the sticky header can be customized.

Change the background & text color of the sticky header

Background color: Go to Appearance > Customize > Harper Theme Colors > Navigation > Sticky Navigation Background.

Text color: Go to Appearance > Customize > Harper Theme Colors > Navigation > Sticky Navigation Text.

Remove sticky header entirely

If you'd like to fully remove the sticky header and navigation menu in Harper, here are instructions:

  1. Click here and copy the code.
  2. Go to WordPress > Appearance > Customize > Additional CSS.
  3. Paste the code in the box, and then click Publish to save.

Remove only the site title from the sticky header

  1. Click here and copy the code.
  2. Go to WordPress > Appearance > Customize > Additional CSS.
  3. Paste the code in the box, and then click Publish to save.

Remove only the social icons from the sticky header

  1. Click here and copy the code.
  2. Go to WordPress > Appearance > Customize > Additional CSS.
  3. Paste the code in the box, and then click Publish to save.

Change font size of site title in the sticky header

  1. Click here and copy the code.
  2. Go to WordPress > Appearance > Customize > Additional CSS.
  3. Paste the code in the box, and then click Publish to save. 
  4. You can adjust both values (font size and top margin) to suit your preferences. The top margin controls the space between the top of the bar and the start of the site title.

Add logo to sticky header

Link to instructions.

Disable sticky positioning of the mobile menu

If you'd like your mobile menu to stay put at the top of your site instead of scrolling with the page, here are instructions:

  1. Click here and copy the code.
  2. Go to WordPress > Appearance > Customize > Additional CSS.
  3. Paste the code in the box, and then click Publish to save.

Make top navigation sticky

If you'd like your top navigation menu (the "gold bar" in the demo) to be sticky, this is possible, but only in a specific use case. There cannot be an Instagram feed above the header, AND the sticky header must be disabled entirely (see above).

  1. Click here and copy the code.
  2. Go to WordPress > Appearance > Customize > Additional CSS.
  3. Paste the code in the box, and then click Publish to save.