Header | Logo, Call to Action, Favicon

Each Theme comes with an editable header area which provides the ability to edit your:

  1. Logo - Text or Image
  2. Phone number or call to action
  3. Favicon - this is the small thumb image that shows on a browser tab

Site header

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

Headers the logo, navigation and phone number or call to action.

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. customize elements of your website header.
  5. apply.

You have now customized 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.

This option is only available in Version 2 themes.
  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.


Styling the header

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)

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

Header Header styling allows you to change:
  1. colors
  2. spacing
  3. the header being fixed to the top of scrolling with the page
  4. call-to-action styling
Navigation Navigation styling allows you to change:
  1. navigation menu item alignment
  2. text properties
  3. text colors
  4. padding between menu text
It is important to check each device view to see how the site looks and change styles accordingly for each device.

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
An important tip: It can be really exciting to start a new business and see your logo/business name on your website. This often leads to business owners wanting to see their logo as large as possible. However while it is exciting for you, most consumers care far less about a brand than what the brand can do for them. Making your logo too large can distract from the page or take up important real estate and make your site visitors miss out on other more important aspects of the page.


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.


Custom Text

Custom text is only available on some header layouts that allow for enough space to fit some description text into the header. Typically this is for additional text like an address or a call-to-action that requires more space than the CTA button above.

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:

Can't find the answer you are looking for?

Try using different keywords: