Series 2. Episode 2: 6 ways to customise your website Header

1. Header Location

For Horizontal Headers there are two types of Header location. You Header can either sit so that is 'Nested' i.e. it overlays the background image behind it. Or it can sit 'Above' the background image.


If you select 'Nested' you will notice that a Transparency Option will appear. You have two options either 100% Transparency or 10% Transparency.

  • 100% means your header will be completely see-through. When you scroll down the page the background colour will appear.
  • 10% means that your header will show your background colour, though it will have an opacity of 90%, allowing you to see the image below and still read the text in your Header.


If you select 'Above' you menu background will display the full colour.

You can choose your Header background colour by clicking on the Colours Tab in the Styles area.

2. Action Button

There are three options to change your Action Button. 

Action Button Text

This is the text that appears in the button.

Close Button Text

When you click the Action Button a Draw slides down. Notice that the text in the button changes. This will typically be something like 'Close' or 'Exit'. Though you can control what you would like it to say here.

Action Button Icon

You can also select an icon that you would like to appear in your Action Button. You can start typing to filter the icons or simply scroll to find an icon that is appropriate. 

6. CSS & JS

Finally, while MOBLE will also continue to introduce new Headers and Header options, we do understand that a Header can be uniquely specific as to the requirements of a business or project.

Therefore, you have full access to the website CSS and JS to make quick amendments to the code and develop your own Headers.

If you would like to customise your own Header with CSS and JS tweaks, please see free to contact MOBLE at www.moble.com/lets-talk we will be happy to assist and point you in the right direction.

Forthcoming features for the MOBLE Header section are:

  • 30 New Header Designs.
  • A Header Top Bar, including Social Icons.
  • A full Page Slide in Menu Drawer.
  • The ability to move components into different positions.

 So please so stay tuned for the latest releases, and please do let us know via the form below if there are any other features that you would like to see moved up the Road Map.

Feature Request

Your comments and feedback are important to us. What other features would you like to see in the Headers area?