Navbar advanced options


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

To start, we'll connect Navbar links with their corresponding sections.

Within the .navbar find a <!-- Links --> section and replace it with the code below:



<!-- Links -->
<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="#intro">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#best-features">Features</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#examples">Examples</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#gallery">Gallery</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
    </li>
</ul>
<!-- Links -->

    

As you can see we've used the previously created ID of each section and referred to them in the Navbar links. Now when you click on some link you wil be moved to the proper section.

Step 2

Navbar links work as expected, but after clicking on them we're moved immediately to the linked .section. It would be nice to have a scrolling animation.

Thanks to MDB it is be very easy. To the ul which holds the links add the class .smooth-scroll.



<!-- Links -->
<ul class="navbar-nav mr-auto smooth-scroll">

    

Save the file and refresh your browser. After clicking on the link you will notice a nice and smooth animation.

Step 3

We don't need a Search in our navbar. We could find a better use for this space - for example for social icons.

Within the .collapse div, below the links, replace the Search form with the following code:



<!-- Social Icon  -->
<ul class="navbar-nav nav-flex-icons">
    <li class="nav-item">
        <a class="nav-link"><i class="fa fa-facebook"></i></a>
    </li>
    <li class="nav-item">
        <a class="nav-link"><i class="fa fa-twitter"></i></a>
    </li>
    <li class="nav-item">
        <a class="nav-link"><i class="fa fa-instagram"></i></a>
    </li>
</ul>

    

Step 4

The last improvements we'll add to the Navbar will be transparency and animation.

To the .navbar div add the class .scrolling-navbar and remove .primary-color class.



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

    

To make it work as expected we have to also add some code into the style.css file.

Go to the CSS folder and open the file style.css. Then add the following code:



.top-nav-collapse {
  background-color: #24355C;
}
@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}
@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}

    

Save the file and refresh the browser. After scrolling the page, you will notice animation. Our Navbar looks right now really outstanding.

Let me explain to you how it works:

If you remove a color class the .Navbar becomes transparent.

scrolling-navbar is a special class, which tells MDB to launch an animation script when user starts to scroll the page. When MDB discovers that user scrolls the page, the new class .top-nav-collapse is added to the .navbar.

By using small piece of CSS code we tell the browser to add a background-color to the .top-nav-collapse class. That's important, because the .top-nav-collapse class isn't added before the user scrolls the page, as at the beginning our Navbar is transparent. Isn't that clever?

However, we want the navbar color to be always visible on mobile devices, so we've also added the media queries to the style.css file.

There are still plenty of things we can improve, nevertheless, our Landing Page is pretty much finished.

Congratulations! Your project looks impressive. In the following tutorials you will learn more advanced techniques and change your static Landing Page into a fully functional website.


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, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits