mhead tutorial

In this tutorial, we'll create an animated sticky header using the mhead.js plugin. Just follow the tutorial step by step and you'll have it up and running in no time.

Lets start with creating a .html file and add some basic markup for a header and the content. For this tutorial we'll assume you already have a stylesheet (called my-styles.css) for styling this markup.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
    </head>
    <body>
        <div id="my-page">
            <div id="my-header"></div>
            <div id="my-content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
    </body>
</html>

Note the ID "my-header" on the <div />, we'll be using it later on to target the header when firing the plugin.

Next, include the mhead .js and .css files. Most commonly, .css files are located in the <head /> and .js files are located before the closing <body />.

<!DOCTYPE html>
<html>
    <head>
        ...
        <link href="path/to/mhead.css" rel="stylesheet" />
    </head>
    <body>
        ...
        <script src="path/to/mhead.js"></script>
    </body>
</html>

The header

Lets add some basic markup for a header showing a title and a hamburger icon (<a class="hamburger" />).

<div id="my-header">
    <a href="#my-menu" class="hamburger"></a>
    My webpage
</div>

Write some CSS to style this new markup. Most commonly, you'd write these styles in a separate .css file, but for this tutorial we'll write them in an inline <style />.

Make sure to use position: sticky; for the header. The plugin CSS also does this, but with a low specificity.

<style>
    #my-header {
        position: sticky;
        line-height: 44px;
        text-align: center;
        background: #eee;
    }
    .hamburger {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

If you're looking for an animated hamburger icon that works out of the box with the mmenu.js plugin, have a look at mburger-css.

Fire the plugin

Now that we have created a .html file, included all needed .css and .js files and set up the markup for the page and the header, we can fire the plugin. Most commonly, you'd write the JavaScript in a separate .js file, but for this tutorial we'll write it in an inline <script />.

Remember the ID "my-header" on the <div />? We're now using it to target the header.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new mhead( "#my-header" );
        }
    );
</script>

Options

The mhead.js plugin provides a set of options for customizing the behavior. The default option values can be overridden by passing new values to the method.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new mhead( "#my-header", {
                scroll: {
                    pin: 100
                }
            });
        }
    );
</script>

For a complete overview of all options, check out the documentation.

Recap

You now have a .html file which looks something like this.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
        <link href="path/to/mhead.css" rel="stylesheet" />
    </head>
    <body>
        <div id="my-page">
            <div id="my-header">
                <a href="#my-menu" class="hamburger"></a>
                My webpage
            </div>
            <div id="my-content">
                <h1>The title</h1>
                <p>Some content.</p>
            </div>
        </div>

        <script src="path/to/mhead.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new mhead( "#my-header", {
                        scroll: {
                            pin: 100
                        }
                    });
                }
            );
        </script>
    </body>
</html>

Learn more

If you'd like to learn more about customizing your header, have a look at the documentation.
Documentation