Built-In Header Layouts
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.
Logo Position

Menu Layouts


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

100% Width Menu

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

Vertical Menu

Vertical navigation layout, good for portfolio and photography websites

Hamburger Menu

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


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


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

Mobile Menu Layouts


Classic responsive drop down navigation with rolling out hierarchies


Responsive navigation via an overlay representation, ideal for any touchscreen

Slide Left

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

Slide Top

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

Top Area Layouts

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


Customization Examples
Page Header
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.
  • Enable transparensy for main menu & top area
  • Control header opacity
  • Use customized colors for menu & logo
  • Use images and videos as backgrounds
  • Disable top area

Additional Header Settings

  • Enable / Disable on-scroll sticky menu and top area
  • Set any meta-navigation in top area bar
  • Set any button in top area bar
  • Choose social profiles to be displayed in top area
  • Define layout for tablets and mobiles
  • Select any colors, fonts and backgrounds

love the gem?

400+ demos
buy now
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.