Creating a Responsive, Left-Side Navigation Menu with Bootstrap 4

Posted on by Dana Hutchins

Not all websites need to look the same! With a few tweaks, we can use a common Web design framework for a layout that breaks away from the typical.

Inforest Communications is in the process of building completed a website design that incorporates a left-side navigation menu in desktop browsers while maintaining a top down menu for mobile users. While this type of layout is unusual in this day and age, we are still able to utilize our favorite, Bootstrap 4 HTML Framework, with a few minor changes.

Bootstrap 4 provides a starting point for Web designers to build “Responsive,” “Mobile-Friendly” websites. The term, “Responsive,” is used to describe a technique where the layout of the site “responds” to the screen width of the web browser viewing it. In the case of smartphones, the screen is typically more narrow than that of a desktop, so the website design “responds” and changes the layout to a single column.

Actually, the process is reversed. Bootstrap 4 is “mobile first,” and starts out with a single column by default and then expands to wider screens, -but you get the idea.

For our left-side navigation layout, we divide the website into two main columns. The first column houses the site logo and navigation, and the second column the bulk of the website content. Using Bootstrap 4’s grid system, the code basically looks like this:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="navbar navbar-expand-md navbar-light">
        <a href="./" title="Website Title" rel="home"><img src="logo.png" class="logo" border="0" alt="Website"/></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topnavbar" aria-controls="topnavbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="topnavbar" class="collapse navbar-collapse">
          <ul id="menu-main-menu" class="navbar-nav flex-column">
            ...navigation links...
          </ul>
        </div>
      </nav>
    </div>
    <div class="col-md">
      ...content...
    </div>
  </div>
</div>

We then have to make a few key changes in order to make this work properly:

  1. Because of the narrow size of the column, the “hamburger” menu icon button shows on desktop browsers, thus we must hide it in our stylesheet:
@media (min-width: 768px), all {
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}
  1. By default, the menu links will be shown as a row, so we add a Bootstrap class, “flex-column” to the UL tag in order make these display vertically in a column:
<ul id="menu-main-menu" class="navbar-nav flex-column">
  1. We also add a style to the <nav> container to display the contents in a column as well:
.navbar-expand-md{
  -ms-flex-flow: column wrap !important;
  flex-flow: column wrap !important;
 }

The result is a layout that starts as a single column in mobile with a typical Bootstrap hamburger menu for navigation, but will turn into a two column layout with a vertical navigation bar when the browser width is larger than 768 pixels.

Thus, we satisfy the needs for both mobile and desktop users, allowing us to develop a website layout for desktop users that breaks away from the typical horizontal menu layout, -giving us a break from the ordinary!

Leave a Reply