Customizing The Header

Last updated last month

This feature enables you to easily add or remove header components such as the logo, mini-cart, social menu, and primary navigation.

You can start by adding a component and use drag and drop to re-arrange header elements to adjust their display order. Also, you would be able to update the width of each element in the header by dragging its edges.

Adjusting Header Layout

Follow the steps below to toggle and rearrange components on your site’s header:

Adding a component and use drag and drop to re-arrange header elements via Customizer
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to Layout » Header section.

  4. Click the + Customize button. A new window opens to display five components: Social Navigation, Secondary Navigation, Logo, Primary Navigation, and Cart.

  5. Add components you want to use and adjust them by selecting the + icon next to each.

  6. Click the x Customize button to close the customizer window.

  7. Click the Publish button at the top right of the Customizer to display the updated components with customized order on your site header.

The inline content of header components can be aligned horizontally in its parent block element.

Changing The Order of Components

You can easily use your mouse to quickly rearrange header components and move them to a different column or row.

Rearrange header components and move them to a different column or row

Resizing a Component

With your mouse, hover over the corner/borders, then click and drag to resize the component.

Drag to resize the header components

Removing a Component

Click on the X icon in the right-hand corner of the component to remove it from the view.

Removing header component from the view

Logo Alignment

This control allows you to specify the horizontal alignment of the logo in the header component.

Possible Choices

  • Left

  • Center

  • Right

Social Menu Alignment

This control allows you to specify the horizontal alignment of the social menu items in the header component.

Possible Choices

  • Left

  • Center

  • Right

Secondary Menu Alignment

This control allows you to specify the horizontal alignment of the secondary menu items in the header component.

Possible Choices

  • Left

  • Center

  • Right

Primary Menu Alignment

This control allows you to specify the horizontal alignment of the primary menu items in the header component.

Possible Choices

  • Left

  • Center

  • Right

This option lets you to make the entire site header stay at the browser window while you are scrolling down.

Make site header to stay at the browser window while the user is scrolling down
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to Layout » Header section.

  4. Locate the Sticky header control and toggle to enable or disable it.

  5. Click the Publish button at the top right of the Customizer to save the changes.