Header & Menu

Header & Menu

The header area consists of a Logo, Site Title and Tagline, Navigation Menu and a Top Info Bar. The whole area can be laid out in a couple of different ways.

Site title and tagline

To add site title and/or tagline navigate to Appearance » Customize » Site Identity.


Logo

To add a logo navigate to the Appearance » Customize » Site Identity and click "Select logo". We recommend to prepare your logo image before uploading and then selecting "Skip Cropping" when adding the logo. The logo image size we used in the demo is "247x87px".

In the same section your can add the "Site Icon" image that will display in browser tabs and bookmark bars.


Menu

To create a menu we recommend creating at least a couple of pages with content first.

Navigate to the Customize » Menus and click "Create New Menu". You can name it however you like. In theme demo we named it "Primary Menu".

To make this your main navigation menu, in Theme Locations check Top Menu box and save it.

If you imported the theme demo content then the "Primary Menu" will already be set up with the demo pages and also set as a main navigation menu. You can then either edit it, as you add your own pages, or create a new menu as described above.


Header & Menu Layout Options

Olorien theme comes with a couple of header layout options. You can choose between classic and sticky options. The sticky option can be adjusted separately for desktop and mobile view.

To access these options navigate to the Customize » Theme Options » Header Options.


Social Menu Bar

Social menu bar is built using standard WordPress menu. Navigate to the Customize » Menus and create a new menu. You can name it however you like. In theme demo we named it "Social Menu"

To make this your social menu, in Theme Locations check Social Menu box and save it.

To add socials to the social menu you first need to add Custom Links to the menu. Then inside the "URL" field add your social page url and in the "Link Text" field add the name of the social, for example "Facebook". Once you added it to the menu, social icon will automatically show up inside the socials bar. Once you are finished adding all your socials click "Save Menu".

**Below you can find a list of supported social networks. If you add a network or a website URL that is not listed below then a generic icon will be applied to it in the social menu bar.

Available icons

Linking to any of the following sites will automatically display the correct icon in your menu.

  • Codepen
  • Digg
  • Dribbble
  • Facebook
  • Flickr
  • GitHub
  • Google+
  • Instagram
  • Linkedin
  • Pinterest
  • RSS Feed (urls with /feed/)
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Find more about setting up the menu here: WordPress Menu User Guide