Top Bar & Header

Layout

There are seven header layouts available in The7  (fig. 1):

Fig. 1. Header layouts.

You can find some examples below (fig. 2.1 – 2.3):

Fig. 2.1. Classic header.

Fig. 2.1. Classic header.

Fig. 2.2. Inline header.

Fig. 2.2. Inline header.

Fig. 2.3. Split header.

Fig. 2.3. Split header.

Header layout affects number and position of areas where you can place microwidgets (top bar right, top bar left, etc).

Header layout options also allow you to configure spacing between elements (fig. 4).

Fig. 4.2. "Area near menu" paddings. Fig. 4. “Area near menu” paddings.

You can also fine-tune elements alignment (fig. 5):

Fig. 5. Elements alignment.

Fig. 5. Elements alignment.

Microwidgets

You can enable so called Microwidgets (icons like “Cart”, “Working hours”, “Search”, etc) and drag and drop them to topbar locations and other available location based on the header layout you have selected (fig. 3):

Fig. 3. Microwidgets.

To edit Microwidget content just click on the “pencil” icon (fig. 3):

When edit a specific micro widget, you can configure the visibility of widget for different devices (fig. 4)

Fig. 4. Edit microwidget

The following Microwidget elements are available:

  • contact information (address, phone, email, skype, working hours);
  • login;
  • text areas;
  • custom menu;
  • social icons;
  • cart (when WooCommerce plugin is activated).
  • Language switcher (if WPML is active)

You can specify font family, size and color for specific microwidget area

Top Bar

In the Top Bar tab, you can specify:

  • elements font family, size, colour;
  • background style: content-width line, full-width line, background, disabled (fig. 6);
  • background colour or image.
Fig. 6. Top bar background.

Fig. 6. Top bar background.

Note: To edit Contents in topbar like Address, Phone number, email etc, you need to edit Micro widgets added to topbar location, refer to Microwidgets section for details.

Header

It is possible to specify the following setting in Header tab:

  • background colour or image;
  • header decoration (shadow, line);
  • menu background for “Classic” header;
  • “Navigation on click” headers style (if “Side navigation on click” or “Overlay navigation” is enabled): header shadow or line decoration, background overlay properties (colour, opacity, “close” button).

Menu

It is possible to specify the following setting in Menu tab:

  • main menu font family, size, colour, border radius;
  • hover and active menu items style;
  • enable/disable next level indicator icons;
  • specify menu items margins & paddings;
  • enable (fig. 7.1) or disable (fig. 7.2) full height & full width links:
    Fig. 7.1. Enabled full-width links.

    Fig. 7.1. Enabled full-width links.

    Fig. 7.2. Disabled full-width links.

    Fig. 7.2. Disabled full-width links.

  • enable or disable dividers between menu items;
  • decoration styles for horizontal headers (colour outline or background for hovers, animation, etc).

Submenu

It is possible to specify the following setting in Submenu tab:

  • dropdown menu font family, size, colour, background (fig. 8);
  • hover and active menu items style;
  • specify menu items margins & paddings;
  • select sideways or downwards layout if you use side navigation.

    Fig. 8. Submenu background.

    Fig. 8. Submenu background.

Floating header

In the Floating header tab, you can specify:

  • if this header should be enabled;
  • effect: Fade on scroll, Slide on scroll, Sticky;
  • set the header to show up after __ px scrolling;
  • floating header height, colour and decoration (shadow, line, disabled).

Mobile header

This tab allows you to specify:

  • first header switch point (for tablets) and second header switch point (for phones);
  • header height and layout for tablets and phones (fig. 11):

    Fig. 10. Mobile header layouts.

    Fig. 11. Mobile header layouts.

  • enable or disable floating mobile navigation;
  • specify font family, size and colour, including hovered/active menu items;
  • mobile menu background and alignment (fig. 12):

    Fig. 11. Mobile menu alignment.

    Fig. 12. Mobile menu alignment.