How to Configure a Custom Responsive Header

Business Need

Responsive headers automatically adjust their content (e.g., font sizes, image dimensions, etc.) to different screen resolutions while users navigate within an application. When designed correctly, responsive headers are always legible and easy to use on any device, from smartphones to high-resolution monitors.

Overview of the solution

Since every documentation portal has a unique design, there is no generic solution. Fluid Topics provides a method that uses custom CSS based on media queries to create responsive navigation and display.

The media queries adjust the height of the following two elements:

#FT-tenant-custom-header is the container of the custom header. It is used to display the header.vm file.
.FT-application-content is the container of the Fluid Topics application. It is used to display the Fluid Topics native header, the sidebar, and content.

Prerequisites

Before customizing the CSS, it is necessary to provide a header.vm file. This file includes a section that makes the header responsive. See Add a Custom Header to learn how to create a custom header.vm file.

Procedure

Follow these steps to add custom CSS to the portal.

Enter the portal.
In the Portal section of the Administration menu, select the Theme option.
Scroll to the bottom of the page and select Advanced settings to display the Custom LESS editor.
Enter the custom CSS.
Select Preview to test the changes.
Select Save when satisfied with the results.

Keep the following in mind when adding custom CSS content:

Fluid Topics does not support issues caused by the modification of the interface and cannot guarantee that the application will remain compatible with such modifications over time. Please proceed with caution.
If using HEX color codes, it is necessary to enter them without quotation marks as follows: @example_of_element_name: #ffc107.

Example

The following code has not been fully tested on all browsers and is only meant as a starting point when customizing CSS. Antidot cannot be held responsible for any errors resulting from the use of customized code.

Several breakpoints are already used in Fluid Topics.
```
    // breakpoints used by FT
    @portraitTabletsMinWidth: 48em; // = 768px //breakpoint used for tablet
    @modernDesktopsMinWidth: 80em; // = 1280px //breakpoint used for desktop
```
These breakpoints must remain in place in order to prevent the app from "blinking" all the time. It is possible to add more breakpoints, for example to hide/unhide labels in landscape/portrait mode for tablets.

The following sample variables make the header responsive. While not mandatory, using variables is recommended.

    // examples of variables to change custom header height
    @tenantCustomHeaderHeight: 100px;
    @tenantCustomHeaderHeight_Tablet: 200px;
    @tenantCustomHeaderHeight_Desktop: 400px;

Define what will not change regardless of the device / screen size.

    //some text decoration for all sizes
    .mobile, .tablet, .desktop { color: white; }

Define the behavior on mobile devices.

It is important that the following two elements have the same values (XXX). The Fluid Topics application will not be displayed correctly if these two values are not the same. Using variables ensures that these values are always the same.
```
    #FT-tenant-custom-header { height: XXX }
    .FT-application-content { top: XXX }
```
This section can also include elements from the header.vm file. The sample code in this example hides/unhides spans for mobile, tablet, and desktop. Since the content of the customer header can interfere with the display of the Fluid Topics application, proficiency in CSS is required to update the customized code.
```
    /*** RESPONSIVE BEHAVIOR ***/
    // example on small devices
    #FT-tenant-custom-header {
    background-color: red;
    height: @tenantCustomHeaderHeight; // The custom header height must be...
    .mobile{ display: inline-block; }
    .tablet, .desktop {display: none; }
    }
    .FT-application-content { top: @tenantCustomHeaderHeight; // ... equals to the top of application wrapper }
```

Now that the custom header has been configured for mobile devices, it is necessary to add media queries in order to make the header fully responsive.

The @media(min-width: XXX) rule defines the minimum screen width from which the CSS is adapted for mobile display. This is where breakpoints are reused.

As mentioned earlier, #FT-tenant-custom-header { height: XXX } and .FT-application-content { top: XXX } must be equal. Use a variable to ensure that they are always equal.

    // example on medium devices (tablet)
    @media (min-width: @portraitTabletsMinWidth) {
        #FT-tenant-custom-header {
            background-color: green;
            height: @tenantCustomHeaderHeight_Tablet;
            .tablet{ display: inline-block; }
            .mobile, .desktop {display: none; }
        }
        .FT-application-content { top: @tenantCustomHeaderHeight_Tablet; }
    }

    // example on large devices (desktop)
    @media (min-width: @modernDesktopsMinWidth) {
        #FT-tenant-custom-header {
            background-color: blue;
            height: @tenantCustomHeaderHeight_Desktop;
            .desktop{ display: inline-block; }
            .mobile, .tablet {display: none; }
        }
    .FT-application-content { top: @tenantCustomHeaderHeight_Desktop; }
    }

Make sure the custom classes are used properly in the header.vm file.

<header id="my-custom-header">
    <section class="logo left-section">
        <img src="mobile-img.png" class="mobile">
        <img src="tablet-img.png" class="tablet">
        <img src="desktop-img.png" class="desktop">
    </section>
    <section class="buttons right-section">
        <button id="touch-btn" class="mobile tablet">Foo</button>
        <button id="click-btn" class="desktop">Bar</button>
    </section>
</header>