Header: Logo, Call to Action, Favicon

Site header

The Header of your website appears consistently site-wide, which means that it stays the same across all web pages.

Within the header you have:

1. your logo,
2. navigation (menu)
3. phone number or call to action
4. in some header custom text
5. social media buttons

All of these items above can be customised and controlled on whether to display or not.

Header example:

To edit the elements of your website header:

1. editing of the header can be done from any page.
2. hover your cursor on top of header section on your page.
3. click on the edit icon.
4. customise elements of your website header.
5. apply.

You have now customised the header of your website. These changes have now been applied across all pages on your website.

Header layout

It's possible to change the layout of the header to a different format should you wish to.

1. click the sections icon to open the different header layouts in the left panel
2. click the layout you wish
3. this will automatically change the header layout

Click here to learn more about header layouts.

Help Video

This help video shows you how to use layouts to change your sites header layout.

Designing the header

When designing your header, there are 2 areas to focus on:

1. Header style - this is what controls the header being:
   1. Colour scheme selection
   2. The transparency on Desktop and Mobile
   3. Fixed position - whether the header remains fixed to the top of the page, or scrolls away with the page as you scroll down.
2. Header layout

To style the header and all contents within it, click on the style icon as highlighted in the image below in the top right corner of the header (only visible on hover).

1. Header style

Hover over the header and click the edit button.

Click the 'Header style' option.

Change the styles to suit your header. These styles will change in the live view of the page you see, but don't worry, no one else sees these until you press the save button.

1. Colour scheme - Choose a colour from the colour palette that suits the look and feel you are looking for.
2. Header transparency - This function works best when you have 'Fixed position' on, or have a page background image on each page. It allows you to set how transparent you want the header to be, over the background underneath.
3. Scrolled header transparency - This sets transparency for the header when a user scrolls down your page.
4. Styles (it's important to set these for each device type where applicable):
   1. Nav alignment - This controls if your navigation is positioned to the left, centre, or right of the header.
   2. Font size and style - This allows you to set the size of the font and associated font properties.
   3. Right nav item spacing - This setting controls the spacing between navigation labels.
   4. Page top spacing - This setting pushes your first page element (e.g. your page banner) down from the top of the page. Most often used with a fixed header, so that the first top section does not get cut off.

2. Header layout

Click the 'Header layout' option.

This left panel slides out with the options show in the image below.

Adding/Changing your logo

1. On the top right of your screen under the save button, click the pen icon to open the header editing options
2. Click 'Logo'
3. If you do not have an image logo, type your business name into the 'Logo text' field.
   1. This can also be styled with the style options lower down this panel
4. if you have a logo click 'Upload image' and browse/insert your logo.
   1. if there is text in the logo field, it is ignored in place of the logo image if you have uploaded one. The logo text is then used as the alt text in the code for the logo image and is useful for schema.
5. If required, adjust your logo image height in both Desktop and Mobile. While the logo will automatically insert to a maximum height, it often still may require some adjustment so as not to make the header too large.
6. click Apply

Adding a phone number or call to action

1. On the top right of your screen under the save button, click the pen icon to open the header editing options
2. Click 'Button/Phone (CTA)'
3. You'll have 2 options to choose from:
   1. Phone - Entering your phone number will make the number automatically 'click-to-call' on mobile devices.
   2. URL (Button)
      1. Text is what will display in the button
      2. Link can either be an internal page which you can choose from a dropdown, or an external link.
4. Styling your phone/button is often recommended where you are changing the styles of your theme.

1. Phone - Adding your phone number in, will automatically make your phone number 'click-to-call'
2. URL:
   1. Text - this will be the text that appears in the CTA
   2. Link - Either select from an internal page, or paste in an external link.
3. Buttons - Choose the button style that best suits your CTA
4. Colour scheme - Either choose from an existing colour palette, or select a custom colour.

Custom Text

Custom text is typically used for placing  additional text like an address or a call-to-action that requires more space than the CTA in the step button above.

Custom text is only available on some header layouts that allow for enough space to fit some description text into the header. 

If the header you have chosen does not support this option, Limecube tells you when trying to activate this feature. If it is important, you can simply change header layouts to one that allows for custom text.

Adding a favicon

This help video shows you how to add a Favicon to your site. The Favicon is the small logo showing on the browser tab.

Steps to add a favicon

Favicon is an important component of a website and is shown at the top of web browser tabs. See example below:

To add a favicon:

1. open your header editor
2. look for 'Favicon'
3. browse and insert the image you want to use as the favicon, usually the logo.
4. click Apply

Navigation

If you are looking at how to manage your navigation, click here.

If you are looking at how to add pages to your navigation, click here.

Adding Search

To add search to your header and allow people to search through your site, do the following:

1. Hover over the header in admin
2. In the top right corner click the edit button
3. When the header options slide out, choose 'Search element'
4. Switch search on
5. Select the page that you wish to display the search results on.

The video below also shows how to do that:

Adding an iOS home screen icon for your website

On iOS devices using the Safari browser, you can add a shortcut to your home screen for a website. By default, the shortcut image thumb will display a screenshot of your website. Below we'll explain how to change that default and use an image of your choosing instead.

Creating and uploading your icon

In order for the icon to work correctly, it must use the following specifications:

1. The image for the shortcut must be 150x150 pixels in size.
2. Must be saved in .png format
3. Must be titled apple-touch-icon (it is case sensitive)

Once you have created this image, upload it to the file manager in your site. We recommend adding this to a folder called 'Misc' (you may need to create it if you don't already have it), the reasons why explained below.

Adding the icon to your site

Once you have uploaded the icon, you will need to add a small piece of code to the <head> tag of the page you would like to use the icon for. 

<link rel="apple-touch-icon" href="Misc/apple-touch-icon.png">

you'll note this path has 'Misc' in it, as per the folder instructions above, to make it easy for you to simply copy and paste this line above without needing to make any edits to it.

Visit this page for instructions on how to insert custom code to the head tag.

Troubleshooting

If the above has not worked, make sure you check against the 3 points above. And make sure you have placed that image into the 'Misc' folder.