Top Bar & Header

Layout

There are six header layouts available within The7.3 (fig. 1):

Fig. 1. Header layouts.

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.

You can enable so called Microwidgets (icons like “Cart”, “Working hours”, “Search”, etc) and configure their position (fig. 3):

Fig. 3. Microwidgets.

Fig. 3. Microwidgets.

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).

2015-10-26_1542

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.

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.

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;
  • menu icon for so called “hamburger” button;
  •  “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;
  • hover and active menu items style;
  • specify menu items margins & paddings;
  • select sideways or downwards layout if you use side navigation (fig. 8):

    Fig. 8. Submenu layout.

    Fig. 8. Submenu layout.

Microwidgets

The following microwidget elements are available:

  • contact information (address, phone, email, skype, working hours);
  • login;
  • text area;
  • custom menu;
  • social icons.

It is allowed to specify font family, size and colour for specific microwidget area (fig. 9):

Fig. 9. Microwidget settings.

Fig. 9. Microwidget settings.

Important: Since ver. 3.3.0, microwidget content should be set up in “Layout” tab: just click on the “pencil” icon (fig. 10):

Fig. 10. Microwidget content.

Fig. 10. Microwidget content.

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.