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.<\/div>\n
[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column el_class=”logo-1″]
<\/div>
<\/div>[vc_column_text]<\/p>\n
Logo Position<\/span><\/div>\n[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/3″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”19656″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/starting_page\/themes.php?page=business-01″][vc_column_text]<\/p>\n
Left Logo<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/3″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”19654″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/starting_page\/themes.php?page=business-04″][vc_column_text]<\/p>\n
Centered Logo<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/3″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”19652″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/starting_page\/themes.php?page=business-1-2″][vc_column_text]<\/p>\n
Right Logo<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/3″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”19650″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/starting_page\/themes.php?page=business-06″][vc_column_text]<\/p>\n
Centered Above Menu<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/3″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”19648″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/home\/splash-creative-light-01\/”][vc_column_text]<\/p>\n
With Vertical Menu<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/3″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”19645″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https:\/\/codex-themes.com\/thegem\/sites\/agency-dark\/”][vc_column_text]<\/p>\n
With Hamburger Menu<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column el_class=”logo-2″]
<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Menu Layouts” color=”custom” accent_color=”#dfe5e8″]
<\/div>
<\/div>[\/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;}”]
<\/div>
<\/div>[vc_single_image image=”19755″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/pages\/services-quickfinders\/services\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Standard<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
The classic horizontal navigation layout, perfect for any corporate website or online shop<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/3″ el_class=”custom-hover” css=”.vc_custom_1505484407855{padding-right: 40px !important;padding-left: 40px !important;}”]
<\/div>
<\/div>[vc_single_image image=”19695″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/page-builders\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
100% Width Menu<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
Horizontal navigation with 100% width layout, ideally suitable for creative websites<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/3″ el_class=”custom-hover” css=”.vc_custom_1505484414744{padding-right: 40px !important;padding-left: 40px !important;}”]
<\/div>
<\/div>[vc_single_image image=”19693″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/starting_page\/themes.php?page=splash-portfolio-dark”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Vertical Menu<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
Vertical navigation layout, good for portfolio and photography websites<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/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″]
<\/div>
<\/div>[vc_single_image image=”29562″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/sites\/agency-dark\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Hamburger Menu<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
Hamburger menu navigation for minimalistic and modern layouts. Excellent for any website<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/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″]
<\/div>
<\/div>[vc_single_image image=”29564″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/pages\/about-us\/about-me-03\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Overlay<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
This navigation layout is a good choice for agencies and any other creative websites<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/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″]
<\/div>
<\/div>[vc_single_image image=”29566″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/pages\/meet-our-team\/meet-our-team-3\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Perspective<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
A fresh, creative and unique navigation layout with unusual page transformation effect<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column]
<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Mobile Menu Layouts” color=”custom” accent_color=”#dfe5e8″]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”29576″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/elements\/push-the-button\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Classic<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
Classic responsive drop down navigation with rolling out hierarchies<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”29574″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/sites\/agency-media\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Overlay<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
Responsive navigation via an overlay representation, ideal for any touchscreen<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”29572″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/shop\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Slide Left<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
Mobile menu sliding from the left side. Perfect for depicting complex hierarchies<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”29570″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”https:\/\/codex-themes.com\/thegem\/sites\/business-solutions\/”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Slide Top<\/div>\n
[\/vc_column_text][vc_column_text css_animation=”appear”]<\/p>\n
Similar to slide left mobile navigation, but sliding from the top of the screen<\/p>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column]
<\/div>
<\/div>[vc_text_separator title_light=”1″ title_level=”h3″ title=”Top Area Layouts” color=”custom” accent_color=”#dfe5e8″]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”24108″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”#”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Left<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”24110″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”#”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Centered<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”24112″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”#”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Right<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][vc_column width=”1\/4″ el_class=”custom-hover”]
<\/div>
<\/div>[vc_single_image image=”24114″ img_size=”full” alignment=”center” onclick=”custom_link” css_animation=”appear” link=”#”]
<\/div>
<\/div>[vc_column_text css_animation=”appear”]<\/p>\n
Disabled<\/div>\n
[\/vc_column_text]
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row css=”.vc_custom_1463563700513{margin-bottom: 0px !important;}” el_class=”figure-1″][vc_column]