Scroll Top
Header layout & Styles
Headers Layout & Styles

[vc_row][vc_column el_class=”logo-1″][gem_divider margin_top=”160″][vc_column_text]

TheGem includes versatile settings for website header, menu and navigation. It delivers 8 navigation concepts in total of 20+ pre-made styles for main menu and top area bar, which you can freely combine with each other. And you can adjust all this styles – change colors, fonts, backgrounds etc. In addition you can set individual settings for selected pages of your site. Enable transparency for main menu & top area. Control header opacity. Use customized colors for menu & logo. Use images and videos as backgrounds. Enable or disable sticky headers and navigation. And much more.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column el_class=”logo-1″][gem_divider margin_top=”112″][vc_column_text]

Logo Position

[/vc_column_text][gem_divider margin_top=”-15″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”19656″ img_size=”full” alignment=”center” onclick=”custom_link” link=”https://codex-themes.com/thegem-elementor/agency-mountains/”][vc_column_text]

Left Logo

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/3″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”19654″ img_size=”full” alignment=”center” onclick=”custom_link” link=”https://codex-themes.com/thegem-elementor/home/business-04/”][vc_column_text]

Centered Logo

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/3″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”19652″ img_size=”full” alignment=”center” onclick=”custom_link” link=”https://codex-themes.com/thegem-elementor/home/business-1-2/”][vc_column_text]

Right Logo

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”19650″ img_size=”full” alignment=”center” onclick=”custom_link” link=”https://codex-themes.com/thegem-elementor/home/business-06/”][vc_column_text]

Centered Above Menu

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/3″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”19648″ img_size=”full” alignment=”center” onclick=”custom_link” link=”https://codex-themes.com/thegem-elementor/home/splash-creative-light-01/”][vc_column_text]

With Vertical Menu

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/3″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”19645″ img_size=”full” alignment=”center” onclick=”custom_link” link=”https://codex-themes.com/thegem-elementor/elements/typography/”][vc_column_text]

With Hamburger Menu

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column el_class=”logo-2″][gem_divider margin_top=”49″][vc_text_separator title_light=”1″ title_level=”h3″ title=”Menu Layouts” color=”custom” accent_color=”#dfe5e8″][gem_divider margin_top=”-10″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″ el_class=”custom-hover” css=”.vc_custom_1505484400536{padding-right: 40px !important;padding-left: 40px !important;}”][gem_divider margin_top=”65″][vc_single_image image=”19755″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/agency-mountains/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Standard

[/vc_column_text][vc_column_text css_animation=”appear”]

The classic horizontal navigation layout, perfect for any corporate website or online shop

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/3″ el_class=”custom-hover” css=”.vc_custom_1505484407855{padding-right: 40px !important;padding-left: 40px !important;}”][gem_divider margin_top=”65″][vc_single_image image=”19695″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/product-landing/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

100% Width Menu

[/vc_column_text][vc_column_text css_animation=”appear”]

Horizontal navigation with 100% width layout, ideally suitable for creative websites

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/3″ el_class=”custom-hover” css=”.vc_custom_1505484414744{padding-right: 40px !important;padding-left: 40px !important;}”][gem_divider margin_top=”65″][vc_single_image image=”19693″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/splash-portfolio-dark/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Vertical Menu

[/vc_column_text][vc_column_text css_animation=”appear”]

Vertical navigation layout, good for portfolio and photography websites

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row el_class=”custom-float”][vc_column width=”1/3″ el_class=”custom-hover” css=”.vc_custom_1562239277912{padding-right: 40px !important;padding-left: 40px !important;}” offset=”vc_col-lg-4″][gem_divider margin_top=”65″][vc_single_image image=”29562″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/agency-light/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Hamburger Menu

[/vc_column_text][vc_column_text css_animation=”appear”]

Hamburger menu navigation for minimalistic and modern layouts. Excellent for any website

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/3″ el_class=”custom-hover” css=”.vc_custom_1562239283628{padding-right: 40px !important;padding-left: 40px !important;}” offset=”vc_col-lg-4″][gem_divider margin_top=”14″][vc_single_image image=”29564″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/pages/about-us/about-me-03/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Overlay

[/vc_column_text][vc_column_text css_animation=”appear”]

This navigation layout is a good choice for agencies and any other creative websites

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/3″ el_class=”custom-hover” css=”.vc_custom_1562239289486{padding-right: 40px !important;padding-left: 40px !important;}” offset=”vc_col-lg-4″][gem_divider margin_top=”14″][vc_single_image image=”29566″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/pages/meet-our-team/meet-our-team-3/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Perspective

[/vc_column_text][vc_column_text css_animation=”appear”]

A fresh, creative and unique navigation layout with unusual page transformation effect

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][gem_divider margin_top=”49″][vc_text_separator title_light=”1″ title_level=”h3″ title=”Mobile Menu Layouts” color=”custom” accent_color=”#dfe5e8″][gem_divider margin_top=”-10″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”29576″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/agency-light/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Classic

[/vc_column_text][vc_column_text css_animation=”appear”]

Classic responsive drop down navigation with rolling out hierarchies

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”29574″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/agency-mountains/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Overlay

[/vc_column_text][vc_column_text css_animation=”appear”]

Responsive navigation via an overlay representation, ideal for any touchscreen

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”29572″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/agency-sparta”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Slide Left

[/vc_column_text][vc_column_text css_animation=”appear”]

Mobile menu sliding from the left side. Perfect for depicting complex hierarchies

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”29570″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https://codex-themes.com/thegem-elementor/agency-dark/”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Slide Top

[/vc_column_text][vc_column_text css_animation=”appear”]

Similar to slide left mobile navigation, but sliding from the top of the screen

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][gem_divider margin_top=”49″][vc_text_separator title_light=”1″ title_level=”h3″ title=”Top Area Layouts” color=”custom” accent_color=”#dfe5e8″][gem_divider margin_top=”-10″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”24108″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”#”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Left

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”24110″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”#”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Centered

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”24112″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”#”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Right

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”65″][vc_single_image image=”24114″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”#”][gem_divider margin_top=”27″][vc_column_text css_animation=”appear”]

Disabled

[/vc_column_text][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row css=”.vc_custom_1463563700513{margin-bottom: 0px !important;}” el_class=”figure-1″][vc_column][gem_fullwidth styled_marker_bottom_style=”triangle” styled_marker_bottom_direction=”outside” background_color=”#ffffff”][vc_empty_space height=”110px”][/gem_fullwidth][/vc_column][/vc_row][vc_row css=”.vc_custom_1463563710655{margin-bottom: 0px !important;}” el_class=”figure-2″][vc_column][gem_fullwidth styled_marker_bottom_style=”triangle” styled_marker_bottom_direction=”outside” background_color=”#e1ec23″][vc_empty_space height=”45px”][/gem_fullwidth][/vc_column][/vc_row][vc_row css=”.vc_custom_1463563732403{margin-bottom: 0px !important;}” el_class=”figure-3″][vc_column][gem_fullwidth styled_marker_bottom_style=”triangle” styled_marker_bottom_direction=”outside” background_color=”#f1fc9e”][vc_empty_space height=”10px”][/gem_fullwidth][/vc_column][/vc_row][vc_row css=”.vc_custom_1463566763543{margin-bottom: 0px !important;}”][vc_column css=”.vc_custom_1463566840187{margin-bottom: -15px !important;}”][gem_fullwidth background_style=”cover” container=”1″ background_image=”24158″][gem_divider margin_top=”200″][gem_icon icon_material=”f4f0″ size=”large” centered=”1″ color=”#ffffff”][gem_divider margin_top=”65″][vc_column_text]

Customizable
Header Styles

[/vc_column_text][gem_divider margin_top=”25″][vc_column_text]

customize it to your needs via theme options. You can adjust colors, fonts, transparencies etc. making your own unique header style

[/vc_column_text][gem_divider margin_top=”125″][vc_text_separator title_light=”1″ title_level=”h3″ title=”PRE-MADE STYLES COMBINATIONS” color=”custom” accent_color=”#ffffff” el_class=”custom-separator-text-color”][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24136″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24138″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24140″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24142″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24144″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”29583″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24146″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24148″][gem_divider margin_top=”170″][/gem_fullwidth][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” css=”.vc_custom_1463567290774{margin-bottom: 0px !important;}”][vc_column][gem_textbox top_style=”ticket”][gem_divider margin_top=”120″][vc_column_text]

Customization Examples

[/vc_column_text][gem_divider margin_top=”115″][gem_image position=”centered” disable_lightbox=”1″ src=”24162″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24164″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24166″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24168″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24170″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24172″][gem_divider margin_top=”60″][gem_image position=”centered” disable_lightbox=”1″ src=”24174″][gem_divider margin_top=”140″][/gem_textbox][/vc_column][/vc_row][vc_row][vc_column][gem_divider margin_top=”100″][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]

Page Header
Options

[/vc_column_text][gem_divider margin_top=”30″][vc_column_text]

In additional you can set this options for displaying your menu and top area bar per page. In this way you can set individual menu settings for selected pages of your site.

[/vc_column_text][/vc_column][vc_column width=”1/2″][gem_image position=”centered” disable_lightbox=”1″ src=”24634″][gem_list type=”check-style-1″ color=”2″]

  • Enable transparensy for main menu & top area

[/gem_list][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][gem_image position=”centered” disable_lightbox=”1″ src=”24637″][gem_list type=”check-style-1″ color=”2″]

  • Control header opacity

[/gem_list][/vc_column][vc_column width=”1/2″][gem_image position=”centered” disable_lightbox=”1″ src=”24639″][gem_list type=”check-style-1″ color=”2″]

  • Use customized colors for menu & logo

[/gem_list][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][gem_image position=”centered” disable_lightbox=”1″ src=”24641″][gem_list type=”check-style-1″ color=”2″]

  • Use images and videos as backgrounds

[/gem_list][/vc_column][vc_column width=”1/2″][gem_image position=”centered” disable_lightbox=”1″ src=”24643″][gem_list type=”check-style-1″ color=”2″]

  • Disable top area

[/gem_list][/vc_column][/vc_row][vc_row][vc_column][gem_divider margin_top=”100″][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1463579699247{margin-bottom: 0px !important;background-color: #a3e7f0 !important;}”][vc_column][gem_divider margin_top=”130″][vc_text_separator title_light=”1″ title=”Additional Header Settings” color=”custom” style=”double” accent_color=”#3c3950″][gem_divider margin_top=”50″][vc_row_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-1″ color=”1″]

  • Enable / Disable on-scroll sticky menu and top area
  • Set any meta-navigation in top area bar

[/gem_list][/vc_column_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-1″ color=”1″]

  • Set any button in top area bar
  • Choose social profiles to be displayed in top area

[/gem_list][/vc_column_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-1″ color=”1″]

  • Define layout for tablets and mobiles
  • Select any colors, fonts and backgrounds

[/gem_list][/vc_column_inner][/vc_row_inner][gem_divider margin_top=”120″][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1463643709882{margin-bottom: 0px !important;padding-top: 20px !important;background-color: #00bcd4 !important;}”][vc_column width=”1/2″ offset=”vc_col-lg-7 vc_col-md-7″][gem_divider margin_top=”-15″][gem_icon_with_title icon_material=”f37b” icon_size=”large” level=”h2″ icon_color=”#ffffff” title=”love the gem?” title_color=”#ffffff”][/vc_column][vc_column width=”1/2″ offset=”vc_col-lg-1 vc_col-md-5″ css=”.vc_custom_1463643752446{padding-right: 0px !important;padding-left: 0px !important;}”][gem_divider margin_top=”-47″][gem_button position=”center” style=”outline” size=”large” corner=”50″ border=”5″ icon_pack=”elegant” text=”Buy now!” text_color=”#ffffff” border_color=”#ffffff” link=”url:https%3A%2F%2Fthemeforest.net%2Fitem%2Fthegem-creative-multipurpose-wordpress-theme%2F16061685%3Fref%3DCodexThemes|||”][gem_divider margin_top=”10″][/vc_column][/vc_row]

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.
This site is registered on wpml.org as a development site.