Landing Page – lesson 10


Disclaimer

Some of the components used in this lesson require MDB Pro. If you use MDB Free be aware, not all the functionalities can work as presented in the tutorial.

Learn more about MDB Pro

If you prefer to stay by MDB Free version we recommend you to switch to the next tutorial.

Step 1

At the beginning we'll connect Navbar links with 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 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 an animation on scroll.

Thanks to MDB it will be terribly easy. To the ul which holds the links add a 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 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 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 a class .scrolling-navbar and remove .indigo class.


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

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

Go to CSS folder and open the file style.css. Then add a 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 does it work:

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. What's important, because .top-nav-collapse class isn't added before user scrolls the page, 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.

Congratulation! Your project looks impressive. In the next tutorials you will learn more advanced technics and change your static Landing Page in fully functional website.


Previous lesson Download 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.