The Collapsible Menu Structure and Responsive Design

Well, that will teach me to design mobile first! In my last article, I published a nice flexbox version of my menu structure but ignored collapsibility – a function where the menu automatically is displayed on bigger monitors but automatically disppears behind a drop-down menu button when viewed on a mobile device like a phone. Rather than copying the starter kit and going from there, I decided to do the work myself.

Let’s just say it didn’t work so well.

In the end, I just about copied the starter kit code. Here is my eventual header mark-up:

    <header class="navbar navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                <a class="navbar-brand" href="@Url.Action("Index", "Home", new { area = "Main" })">Grumpy<br>Wizards</a>
            <div id="navbar" class="collapse navbar-collapse navbar-right">
                <ul class="nav navbar-nav">
                    @if (User.Identity.IsAuthenticated) {
                        <li><a href="@Url.Action("Index", "Profile", new { area = "Account" })"><i class="glyphicon glyphicon-user"></i> Administrator</a></li>
                        <li><a href="@Url.Action("Logout", "Login", new { area = "Account" })"><i class="glyphicon glyphicon-log-out"></i> Sign Out</a></li>
                    } else {
                        <li><a href="@Url.Action("Index", "RegisterAccount", new { area = "Account" })"><i class="glyphicon glyphicon-user"></i> Register</a></li>
                        <li><a href="@Url.Action("Index", "Login", new { area = "Account" })"><i class="glyphicon glyphicon-log-in"></i> Sign In</a></li>

Let’s divide this into zones. Firstly is the navbar-header – this contains everything that would be displayed in the mobile version of the site. The button is the menu button – a familiar “hamburger” icon. I could have used a glyphicon here as well, but all the starter kits had this three-span mechanism. I guess there is a reason for it.

On a “bigger than mobile” site, the hamburger is hidden and the navbar ID is shown. On a mobile site, the hamburger shows the navbar ID (underneath the header) on demand as a drop-down. In this way, Bootstrap handles both the mobile and bigger-than-mobile sites simultaneously without copying code.

What about CSS? Well, I wanted two things. Firstly, I wanted my logos, fonts and colors. Secondly, I wanted to make the banner a little larger to properly accomodate the logo font and double-line title. As a result, I turned to a less feature – operations. If I define my header height and then turn all the spacing definitions into calculations, I can easily change the header height if I want.

Let’s start with the navbar-header:

        .navbar-header {
            height: 100%;

            .navbar-brand {
                height: 100%;
                // Background Image
                background-image: data-uri("../images/dragon-logo.png");
                background-repeat: no-repeat;
                background-size: (@header-height * 0.75) (@header-height * 0.75);
                background-position: 0 (@header-height * 0.125);
                // Logo Writing
                font-family: @logo-font;
                color: @color-3;
                font-size: (@header-height * 0.4);
                line-height: (@header-height * 0.4);
                padding-top: (@header-height * 0.08);
                padding-left: (@header-height * 0.9);

            button.navbar-toggle {
                border-color: @color-4;
                margin-top: (@header-height * 0.21) !important;

                .icon-bar {
                    background-color: #ececea;

Although there is a relative lot here, you will note that I’m really only changing the colors and fonts. There are some alterations based on my header height for padding and margins and I’ve included the !important modifier when I really need to override something from Bootstrap.

The #navbar section is similar in nature:

        #navbar {
            background-color: @color-1;

            > ul {
                > li {
                    height: @header-height !important; // Bootstrap !important override

                    > a {
                        font-family: @header-font;
                        font-size: (@header-height * 0.25);
                        line-height: (@header-height * 0.25);
                        padding: (@header-height * 0.32) (@header-height * 0.1);
                        color: @color-4;

                        &:hover, &:active, &:focus {
                            background-color: @color-2;

As with the navbar-header, I’ve just adjusted fonts and colors, plus limited spacing rules to account for the bigger header. A lot of the work here involved playing around with Chrome Developer Tools to make the CSS look good. Once I had it looking good, I transposed the CSS to my stylesheet, replacing the specific pixel sizes with calculations.

Now my styling looks good in Chrome I can move on to the next step – testing on devices. The code is checked in at tag cs-0.0.7.