SideNav, navbar and footer

Author: Michal Szymanski

-

MDB Pro required

This lesson requires MDB Pro package. If you use MDB Free please be aware that some elements may not work as expected.

Get MDB PRO

Step 1 - the basic structure

Similarly to the previous tutorial, in the beginning, we'll create a basic structure for our project.

Open the index.html file in your project folder (the folder where you have unzipped the MDB package) and paste the following code below the body tag:



<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>

</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->

Step 2 - side navigation

Go to the SideNav Docs, then copy the code for the Basic Example and paste it between the header tags:



<!--Main Navigation-->
<header>

  <!-- SideNav slide-out button -->
  <a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fas fa-bars"></i></a>

  <!-- Sidebar navigation -->
  <div id="slide-out" class="side-nav fixed">
      <ul class="custom-scrollbar">
          <!-- Logo -->
          <li>
              <div class="logo-wrapper waves-light">
                  <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
              </div>
          </li>
          <!--/. Logo -->
          <!--Social-->
          <li>
              <ul class="social">
                  <li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
                  <li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
                  <li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
                  <li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
              </ul>
          </li>
          <!--/Social-->
          <!--Search Form-->
          <li>
              <form class="search-form" role="search">
                  <div class="form-group md-form mt-0 pt-1 waves-light">
                      <input type="text" class="form-control" placeholder="Search">
                  </div>
              </form>
          </li>
          <!--/.Search Form-->
          <!-- Side navigation links -->
          <li>
              <ul class="collapsible collapsible-accordion">
                  <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i>
                          Submit blog<i class="fas fa-angle-down rotate-icon"></i></a>
                      <div class="collapsible-body">
                          <ul>
                              <li><a href="#" class="waves-effect">Submit listing</a>
                              </li>
                              <li><a href="#" class="waves-effect">Registration form</a>
                              </li>
                          </ul>
                      </div>
                  </li>
                  <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-hand-pointer"></i>
                          Instruction<i class="fas fa-angle-down rotate-icon"></i></a>
                      <div class="collapsible-body">
                          <ul>
                              <li><a href="#" class="waves-effect">For bloggers</a>
                              </li>
                              <li><a href="#" class="waves-effect">For authors</a>
                              </li>
                          </ul>
                      </div>
                  </li>
                  <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>
                      <div class="collapsible-body">
                          <ul>
                              <li><a href="#" class="waves-effect">Introduction</a>
                              </li>
                              <li><a href="#" class="waves-effect">Monthly meetings</a>
                              </li>
                          </ul>
                      </div>
                  </li>
                  <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-envelope-o"></i> Contact
                          me<i class="fas fa-angle-down rotate-icon"></i></a>
                      <div class="collapsible-body">
                          <ul>
                              <li><a href="#" class="waves-effect">FAQ</a>
                              </li>
                              <li><a href="#" class="waves-effect">Write a message</a>
                              </li>
                              <li><a href="#" class="waves-effect">FAQ</a>
                              </li>
                              <li><a href="#" class="waves-effect">Write a message</a>
                              </li>
                              <li><a href="#" class="waves-effect">FAQ</a>
                              </li>
                              <li><a href="#" class="waves-effect">Write a message</a>
                              </li>
                              <li><a href="#" class="waves-effect">FAQ</a>
                              </li>
                              <li><a href="#" class="waves-effect">Write a message</a>
                              </li>
                          </ul>
                      </div>
                  </li>
              </ul>
          </li>
          <!--/. Side navigation links -->
      </ul>
      <div class="sidenav-bg rgba-blue-strong"></div>
  </div>
  <!--/. Sidebar navigation -->

</header>
<!--Main Navigation-->

After saving the file and refreshing the browser you will notice an impressive blue navigation element on the left side.

Resize the browser window to mobile size and the SideNav disappears. The problem is that the hamburger button, which should trigger SideNav and makes it visible, doesn't work.

That's because we have to initialize it first.

Initialization involves calling the proper javascript function.

Step 3 - SideNav initialization

In the scripts section (at the bottom of the document), below the MDB files, place the following code:



<script>
  // SideNav Button Initialization
  $(".button-collapse").sideNav();
  // SideNav Scrollbar Initialization
  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);
</script>

Save the file and refresh the browser. Now the hamburger button should work as expected.

To learn more about available options of the SideNav read our SideNav Docs.

Step 4 - Navbar

Admin dashboards are complicated constructions because they have to manage multiple functionalities and data.

That's why they require advanced navigation.

We usually use so-called "double navigation" - the connection of SideNav and Navbar.

In our current project, we already have the SideNav. Now we'll take care of Navbar.

But first, let's remove the code for the Slide-out button. We don't need it, because we'll manage the SideNav another way.

Remove it: 



<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fas fa-bars"></i></a>

Now go to the Navbar documentation and copy the code for the Basic Example.

Then place it above the SideNav:



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">

  <!-- Navbar brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Collapse button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
    aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Collapsible content -->
  <div class="collapse navbar-collapse" id="basicExampleNav">

    <!-- Links -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>

      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>

    </ul>
    <!-- Links -->

    <form class="form-inline">
      <div class="md-form my-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      </div>
    </form>
  </div>
  <!-- Collapsible content -->

</nav>
<!--/.Navbar-->

Save the file and refresh the browser. You will notice that the SideNav covers the left part of the Navbar.

SideNav has fixed position. That means it will be always visible in the same place over any other content.

In order to resolve these problems, we have to set a right padding to main, header and footer. Thanks to that any content inside these elements will be pushed out of the scope of the SideNav.

The SideNav is 240 px wide, so we have to add padding-right: 240 px to main, header and footer.

We could do it via CSS but thanks to MDB it's much easier.

Add the .fixed-sn class to the body element and .double-nav class to the .navbar.



<body class="fixed-sn">

    


<nav class="navbar navbar-expand-lg navbar-dark indigo double-nav">

Save the file and refresh the browser. There are still a few things to improve, but our double navigation now works as expected.

Step 5 - Footer

The last thing we'll create in this lesson is a footer.

Go to Footer Docs and copy the code for the Copyright element. Then paste it below the main section.

Then remove the entire code between <!--Footer Links--> comments and leave only the .footer-copyright element. Finally the footer should look like that:



<!-- Footer -->
<footer class="page-footer font-small blue">

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2018 Copyright:
    <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->
Rate this lesson
Previous lesson Live preview Next lesson
Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Sign up to follow your progress and get additional benefits