Header

3 min read Updated

The Header section sets the header design, the social icons in the header and the space around the logo. Go to AppearanceCustomizeTheme SettingsHeader. To add a logo, see Branding. The search icon and the sticky menu settings are in Navigation.

The Header section with the Header Design, social widget, padding and margin settings

Header Design

Header Design
Choose where the menu shows in relation to the logo. Default: Menu above header. The choices are:

  • Menu above header: The menu bar, with the social icons and the search icon on the right, sits above a centered logo.
  • Menu below header: A centered logo sits above the menu bar, and the social icons and the search icon are on the right of the menu.
  • Menu centered below header: A thin bar at the top holds the social icons on the left and the search icon on the right. A centered logo follows, then a centered menu.
  • Menu inline with logo: The same thin bar sits at the top. Below it, the logo is on the left and the menu is on the right of one bar.

In the last two designs, the thin bar shows only when you add social icons or turn on Menu Search.

The four Unwind header designs stacked

When Sticky Menu is on, the bar that holds the menu sticks to the top of the screen once the visitor scrolls past it. In Menu inline with logo, the logo sticks with the menu.

Social Icons

Below Header Design, the line Add social icons to the menu. has an Edit Widget button. The button opens the form of the Social Media Buttons Widget, where you add your networks and choose the icon design. In Menu above header and Menu below header, the icons show on the right of the menu bar, next to the search icon. In the other two designs, they show on the left of the thin bar at the top of the header. Default: no icons.

This field needs the SiteOrigin Widgets Bundle. Without it, the field shows This field requires the Widgets Bundle plugin. Install the Widgets Bundle now. To install the plugin:

  1. Go to PluginsAdd Plugin.
  2. Search for SiteOrigin Widgets Bundle, then click Install Now and Activate.
  3. Return to the Header section and click Edit Widget.

Unwind activates the Social Media Buttons Widget for you if it is off. For the widget settings, see the Social Media Buttons Widget documentation.

Social media buttons in the menu bar next to the search icon

Spacing

Header Padding
The space above and below the logo. In Menu inline with logo, Unwind uses half of this value. Default: 60px.

Bottom Margin
The space between the header and the page content. It also sets the space below the title of archive and search results pages. Default: 80px. To remove it on one page, turn off Header Bottom Margin in Page Settings.

Both settings update the preview as you change them.

Masthead Widget Area

To show widgets in place of the logo, for example an image with a contact line, add them to the Masthead widget area at AppearanceWidgets. The widgets replace the logo and the site description in every header design except Menu inline with logo. Each widget gets its own column, and Header Padding sets the space above and below them. See Widget Areas.

To hide the header on one page, turn off Header in Page Settings.

  • Navigation for the menu search, the sticky menu and the mobile menu.
  • Branding for the logo and the site description.
  • Menus to add a menu to the header.
  • CSS Snippets for the top bar colors and the menu font.