At Inforest Communications, we believe not all websites need to look the same. With just a few strategic tweaks, even the most common frameworks—like Bootstrap—can be adapted to break away from traditional layouts. Our latest project showcases this by implementing a Bootstrap left side navigation layout for desktop users, while still maintaining a top-down menu on mobile.

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.

Though vertical navigation on desktop is less common these days, we successfully leveraged the power and flexibility of the Bootstrap 4 HTML framework to bring this concept to life with minimal changes.

Why Bootstrap 4?

Bootstrap 4 provides a starting point for Web designers to build “Responsive,” “Mobile-Friendly” websites. Bootstrap 4 offers a responsive, mobile-first foundation for creating websites that adjust seamlessly to different screen sizes. While responsive design often implies starting with a desktop layout and shrinking it down for mobile, Bootstrap does the reverse—it begins with a clean, single-column mobile layout and expands outward for larger screens.

Implementing Bootstrap Left Side Navigation

For this design, we split the layout into two primary columns using Bootstrap’s grid system:

• Column 1 (Left): Contains the site logo and vertical navigation

• Column 2 (Right): Holds the main website content

Here’s a simplified version of the structure:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="navbar navbar-expand-md navbar-light">
        <a href="./"><img src="logo.png" alt="Website Logo" class="logo" /></a>
        <button class="navbar-toggler" ...>
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="topnavbar">
          <ul class="navbar-nav flex-column">
            <!-- Navigation links here -->
          </ul>
        </div>
      </nav>
    </div>
    <div class="col-md">
      <!-- Page content here -->
    </div>
  </div>
</div>

Key Modifications for Desktop View

To optimize the Bootstrap left side navigation for desktop:

Hide the Hamburger Menu on Desktop

The navigation column is narrow, so Bootstrap’s default shows the hamburger menu even on wider screens. We hide it using the following CSS:

@media (min-width: 768px), all {
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

Display Menu Links Vertically

We add Bootstrap’s flex-column class to the <ul> tag to stack navigation links vertically:

2. 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">

3. We also add a style to the <nav> container to display the contents in a column as well:

Stack Nav Items in a Column

We adjust the <nav> container’s flex properties to ensure consistent vertical alignment:

.navbar-expand-md{
  -ms-flex-flow: column wrap !important;
  flex-flow: column wrap !important;
 }

Final Result

The final design starts with a streamlined single-column layout for mobile users—complete with a collapsible hamburger menu. On larger screens, it transforms into a clean two-column layout featuring Bootstrap left side navigation, offering a modern twist that enhances desktop usability without sacrificing mobile responsiveness.