In this Episode we remain in the Header tab in the Styles area, looking specifically at how you can use the 'Customise' Button to configure your Header.

1. HEADER LOCATION

For Horizontal Headers there are two types of Header location. Your 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.

Nested

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.

Above

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

You can choose your Header background colour by clicking on the Colours Tab in the Styles area. Jump ahead to Episode 5 to learn about colours.

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. 

3. LINK BUTTON

The Link button is very much the same, with the ability to change the text and the icon. You should consider keeping the word as short as possible as there really is not too much space. So typically, this might be something like 'Join', 'Pay', 'Login', 'Win' etc.

Notice that you should also include the URL of the page that you are linking to.

If you are linking to a page on your website you only require the last part of your URL including the forward slash. E.g.

• /your-page-name

If the page is linking to another website you will need the entire website address and the page will automatically open in a new Window. E.g.

• https://www.website-name.com/page-name
  
  

4. DRAWER MENU

You can change the Word used underneath the Drawer Menu icon. Typically this will be 'Menu'. Though this could be for anything e.g. if you had a playlist of tracks. You might call this tracks or play.

Though you can be creative, always choose small words to fit the space, perhaps words with no more than 5 letters. If your website was for a collection of art, you might simply say the word 'Art'. If you're uncertain it's best to stick with the word 'Menu'.

5. SEARCH

Search allows you to customise the word to open up your website search box. You can also select an icon to appear here also.

6. HTML, 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 HTML, CSS and JS to make quick amendments to the code and develop your own Headers.

Series 9 is a dedicated Series for frontend code. If you're a designer that wants to learn code then this series is your opportunity to get started.

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

Forthcoming features for the MOBLE Header section are:

• Many new Header Designs (in Beta)
• A Header Top Bar (in Beta)
• Create your own Menu Drawer in the Visual Page Editor (in Beta)
• The ability to move components into different positions (future release)