Knowledge
Base

Customising your Header

---

The Header is the area where it encompasses the top toolbar, and the bar comprising of your logo and the navigational menu.

To customize your header, log in and navigate to Showcase Options Header, or https://panopedia.com/account/showcase/options?c=Header.

The top toolbar is a quick eye-catcher, showing your contact information as well as your social media links. You may choose to show or hide it by the Show Toolbar switch.

There are three layouts for you to choose from for the logo & menu area:

1. Logo aligned to the left, menu aligned to the right
2. Logo aligned center, menu aligned center and below the logo
3. Logo aligned right, menu aligned left

Customising the Header Elements

The first set of customisation options is for the area encompassing the logo and the navigational menu. There are five options here:

1. Show Logo - shows or hides the logo on the header area
2. Background Colour - the base background colour for the header area
3. Show Border - determines if there is a border below the header area
4. Border Width - if there is a border, this determines the vertical thickness
5. Border Colour - the colour of the border, if it is shown

Customising the Header Menu

The header menu will be the primary way your viewers will navigate through your site. There are six options available:

1. Font Family - the font type, powered by Google Fonts
2. Font Size - the font size is the vertical height of the characters in pixels
3. Font Weight - the thickness of the font, do note the weights are dependent on the font family and some may not have any change
4. Line Height - this determines the amount of space above and below the text, relative to the size of the font
5. Font Colour - this sets the colour of the text
6. Font Hover Colour - this sets the colour of the text when the viewer's cursor is hovering over it

Customising the Header Toolbar

The header toolbar is the element before the Header Menu area. There are seven options available:

1. Background Colour - sets the background colour for the header toolbar
2. Show Contact - show or hide your contact information on the toolbar
3. Contact Type - determines the visibility of your Email or Contact Number
4. Show Social Icons - show or hide your social media icons on the toolbar
5. Default Social Icon Colours - determines if the social icons will be in their original brand colours
6. Icons Colour - if not in their original brand colours, this sets the colours for all the social icons
7. Icons Hover Colour - the colour for the social icons when viewers' mouse cursor is hovering over