How to display a top header section

The top header section in Matrix themes is the area displayed at the top of the header, typically featuring contact information such as a phone number and email address.

All Matrix themes provide an option to add a top header section above the main header, which can include contact information and other content. The methods for achieving this vary depending on the version of the theme you are using in your template.

To add a top header section in the latest version of the Matrix theme:

1. In the Footer (or sidebar), add a new module by selecting Widget/HTML.

2. Insert the following code into the widget:

3. After adding the code, click the "Apply Styles" button in the style editor or simply refresh the page.

Upon refreshing, the content of your widget should now appear at the top of the header.

Even though this widget appears in the top header section, it works similarly to the header social links. You can still edit it in the Footer (or sidebar) from the same position where you originally added it.

To edit the widget, simply hover your mouse over the editor module, and you'll be able to make changes.

You can use helper classes like color-white, link-white, right-align, size-13, etc., directly within the widget code or in the style editor to customize the appearance of the content.

Another, more complex method (which might require additional styling) is to use variables. To do this:

1. Add a Widget/HTML module to the Footer (or sidebar).

2. Insert the following variable tag into the widget:

<var>draggable-top-header</var>

3. After inserting the code, click the "Apply Styles" button in the style editor or refresh the page. You will see your module appear at the top of the header.

This method should be used only if you want to display another Jimdo module, such as a search bar or share buttons, inside the top header section.

If you’re not using the latest release of the Matrix theme, the top header section must be edited directly in the HTML. To do this, go to Design > Custom Template > HTML and make the necessary changes there.

Not all templates display the top header section by default.

To activate it, you have two options:

1. Open the Style Editor, navigate to Template Configurations, and add the class 'has-top-header'.

2. Go to Custom Layout > HTML tab, find the following line as shown in the screenshot below, and remove the 'hidden' class. Click the save button at the bottom of the page to confirm the changes.

One of the most common mistakes occurs when editing the HTML, leading the system to automatically correct your code by adding a div or closing tag in the wrong position. As a result, the entire template might appear with different and unexpected styles.

To reset back to the default HTML:

1. Go to the 'Updates' section.
2. Choose 'Source files' by selecting a multipurpose or multilingual template.
3. Then, select 'HTML.'
4. Copy the code provided and paste it onto your website.
5. Click the save button at the bottom of the page to confirm the changes