{# Settings #} {% set root = "../../../" %} {% set mainNavActive_1 = "shortcodes" %} {% set sidebarNavActive_1 = "shortcode-base-headers" %} {% set title = "Headers & Navigation Panels | " %} {% include "html/assets/include/nunjucks/partials/head.njk" %} {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %} {% include "html/assets/include/nunjucks/partials/core-css.njk" %} {% include "html/assets/include/nunjucks/partials/core-icons.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/headers/header-main-fullwidth.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-local-search.njk" %}

Headers & Navigation Panels

Classic Header

Classic Header has a variety of design options, types of positioning, types of change when scrolling, several designs for mobile devices. You can combine the settings of headers the way you want.

Classic Designs

White BG

View Header

Dark BG

View Header

Primary BG

View Header

Gradient BG

View Header

Transparent BG

View Header

SemiTransparent white BG

View Header

SemiTransparent black BG

View Header

Bordered BG

View Header

Floating Header Designs

White BG

View Header

Dark BG

View Header

Primary BG

View Header

Gradient BG

View Header

Splitted Header Designs

White BG

View Header

Dark BG

View Header

Primary BG

View Header

Gradient BG

View Header

Header Components

Search bar

View Header

Basket

View Header

Languages

View Header

Nav Styles

Nav Styles - 1

View Header

Nav Styles - 2

View Header

Nav Styles - 3

View Header

Nav Styles - 4

View Header

Nav Styles - 5

View Header

Nav Styles - 6

View Header

Nav Styles - 7

View Header

Nav Styles - 8

View Header

Full Width

View Header

Alignments

Left

View Header

Center

View Header

Right

View Header

TopBar

TopBar - 1

View Header

TopBar - 2

View Header

TopBar - 3

View Header

TopBar - 4

View Header

TopBar - 5

View Header

TopBar - 6

View Header

TopBar - 7

View Header

TopBar - 8

View Header

Positions

Static

View Header

Absolute. Top.

View Header

Absolute. Bottom.

View Header

Absolute. 2-nd Screen.

View Header

Sticky. Top.

View Header

Sticky. Bottom.

View Header

On Scroll Behaviors

Show/hide header

View Header

Change logo

View Header

Change appearance

View Header

Toggle Header

View Header

Hide Top Bar

View Header

Navigation's mobile behavior

Default (top)

View Header

Push (sidebar)

View Header

Overlay (sidebar)

View Header

Submenu & Megamenu

Submenu
(Bootstrap Method)

View Header

Submenu
(Onhover Method)

View Header

Submenu
(Onclick Method)

View Header

Inline
Submenu

View Header

Megamenu
(2 column)

View Header

Megamenu
(3 column)

View Header

Megamenu
(4 column)

View Header

Megamenu
(5 column)

View Header

Megamenu
with horizontal tab

View Header

Megamenu
with vertical tab

View Header

Megamenu
with Contact Form

View Header

Megamenu
with Contact Form - 2

View Header

Megamenu
with Login Form

View Header

Megamenu
with Map & Form

View Header

Megamenu
with Map

View Header

Megamenu
with News Items

View Header

Megamenu
with Products

View Header

One Page Navigation

View Header

Sidebar Navigation

Unify has 3 basic type of a Sidebar Navigation: Static Sidebar Navigation, Dynamic-Overlay Sidebar Navigation & Dynamic-Push Sidebar Navigation. Each type has 2 type of a position (left or right). By choosing g-classes You can change a Sidebar Navigation Design the way you wish.

Static Sidebar Navigation

Left Side

View Header

Right Side

View Header

Overlay Sidebar Navigation

Left Side

View Header

Right Side

View Header

Push Sidebar Navigation

Left Side

View Header

Right Side

View Header

Fullscreen Navigation & Smart Navigation

Unify has number of Fullscreen and Smart Navigation. We tried to make everything as simple as possible. Just choose any examples you like and implement it. If there any questions please feel free to contact and our team will answer as soon as possible.

Fullscreen Navigation

Top-Right

View Header

Bottom-Right

View Header

Bottom-Left

View Header

Smart Navigation

Top-Right

View Header

Bottom-Right

View Header

Bottom-Left

View Header

Tasty CSS-animated hamburgers

We also thought that the way user clicks the and hamburger icon behaves also very important and added 9 different type of hamburger animations. Choose any type you like.

Types

Slider

Squeeze

Arrow

Arrow Alt

Spin

Elastic

Collapse

Vortex

Boring

{% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
{% include "html/assets/include/nunjucks/partials/core-js.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}