Trade Theme Documentation

Change Header Layout, Colors, and Height

To change the header layout, navigate to Appearance->Customize->Header & Navigation->Position & Style, and select your desired setting from the Header Layout select field. There are four options:

• Inline
• Stacked
• Split
• Centered Nav

If you choose Split, make sure to set a menu for the Left Menu location. See Menus.

To change the colors and height of the header, use the other fields in this panel.

Top Bar

Trade comes with an optional top bar that you can display above the header. It is useful for displaying your company telephone number or social links. To add content to the top bar, navigate to Appearance->Customize->Header & Navigation->Top Bar.

Here is an example of how to add a phone number:

<i class="fa fa-phone"> </i>555-392-9934

Here is an example of how to add social links:

<a href="your-url-goes-here" class="fa fa-twitter"></a><a href="your-url-goes-here" class="fa fa-dribbble"></a><a href="your-url-goes-here" class="fa fa-instagram"></a>

Here is an example of how to add a button:

<a class="button" style="margin-left: 10px" href="#">Buy</a>

Sticky Header

To enable or disable the sticky header, navigate to Appearance->Customize->Header & Navigation->Position & Style, and select your desired setting from the Enable Sticky Header select field.

In this panel, you can also set the colors and height of the sticky header.

Transparent Header

On individual pages, posts, and projects, you can set the header to be transparent so the background can show through. To do so, open up the desired page, post, or projects for editing and scroll to the Header Options panel and select Yes from the Transparent Header select field. You will also want to select a color scheme from the Color Scheme select field based on the background’s color. For example, if the image behind the header is dark, select Light.

Logos

To set your site logo image, navigate to Appearance->Customize->Header & Navigation->Logos. Here you can upload your logo image for the main header, sticky header, and dark and light color schemes for each.

Your logo images should be twice as big as you want them to appear on the site. In the Header Logo Width fields enter the width of the logo image in pixels. We use this value to make sure your logo looks great on retina displays.