Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Navigation

Navigation, links, buttons and fonts


Written by Michal Szymanski ,

1. Enhancing the Navbar

Our Navbar looks fine - but it could look better.


Modify Navbar's nav div acorrding to example below:


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

You can see we removed .bg-primary class and added a class .scrolling-navbar. Now it time for a little magic with CSS.

Add the following code to style.css


.navbar {
    background-color: transparent;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}
.scrolling-navbar {
        -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
        transition: background .5s ease-in-out, padding .5s ease-in-out;
}

.top-nav-collapse {
    background-color: #1C2331;
}

@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #1C2331;
    }
}

We set a transparent background for the Navbar, but when you scroll you will notice a smooth animation which gives it a #1C2331 color.

Because using transparent Navbar on mobile would be uncomfortable for users, we use@media only screen and (max-width: 768px) to set it a color.

We also set a white color to all the Navbar's link, to make it more visible.

Save the file and check it yourself.


Now we'll take care of navigation links. Have you noticed that we set before to each section an ID? That's a good moment to use it.

For each <a> inside Navbar set an ID corresponding with a proper section:


<!--Links-->
<ul class="nav navbar-nav">
    <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="#about">About</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="#contact">Contact</a>
    </li>
</ul>

Now when you click on some link in the navbar you'll be moved to the linked section.

You can also remove a Search Form because we don't need it at this moment.


<!--Search form-->
<form class="form-inline">
    <input class="form-control" type="text" placeholder="Search">
</form>

At the end we will add a footer to our Landing Page. Go to the FOOTER section in MDB documentation, grab the footer's code and paste it just before Scripts sections

Additionally, you can add a color class .mdb-color darken-4 to the Footer, to make it more consistent with the rest of our project.


<!--Footer-->
<footer class="page-footer center-on-small-only mdb-color darken-4">

    <!--Footer Links-->
    <div class="container-fluid">
        <div class="row">

            <!--First column-->
            <div class="col-md-3 offset-md-1">
                <h5 class="title">ABOUT MATERIAL DESIGN</h5>
                <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>

                <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
            </div>
            <!--/.First column-->

            <hr class="hidden-md-up">

            <!--Second column-->
            <div class="col-md-2 offset-md-1">
                <h5 class="title">First column</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Second column-->

            <hr class="hidden-md-up">

            <!--Third column-->
            <div class="col-md-2">
                <h5 class="title">Second column</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Third column-->

            <hr class="hidden-md-up">

            <!--Fourth column-->
            <div class="col-md-2">
                <h5 class="title">Third column</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Fourth column-->

        </div>
    </div>
    <!--/.Footer Links-->

    <hr>

    <!--Call to action-->
    <div class="call-to-action">
        <h4>Material Design for Bootstrap</h4>
        <ul>
            <li>
                <h5>Get our UI KIT for free</h5></li>
            <li><a target="_blank" href="http://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
            <li><a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
        </ul>
    </div>
    <!--/.Call to action-->

    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid">
            © 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>

        </div>
    </div>
    <!--/.Copyright-->

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

Now you can edit Footer's content according to your needs.


In the next lesson, we'll take care of animations.


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 8

  • User avatar

    remioum

    Hey Michal, I am testing the MDB package now and reading the quick tutorial. There might be some issues here: the top-nav-collapse class created is never used in your code (even in the zip), and the background does not switch when you scroll but when the menu collapses (small screens...)

  • User avatar

    Michal Szymanski

    Hi Remioum. If you mean downloadable files, check carefully. You can find top-nav-collapse within CSS file and it works fine when scrolling.

  • Jonathan Smith

    I'm having the same issue with the top-nav-collapse

  • User avatar

    Michal Szymanski

    Guys, you cannot see the class "top-nav-collapse" in the html file, because this class is added via JavaScript after scrolling. Open the live preview, scroll the page and inspect the Navbar - then you will see what exactly happened.

  • User avatar

    James

    I have recently completed this lesson. My code works properly. For those who are saying they can't see the class. Please try inspecting elements or view source after scrolling and you will see the class right in place. Thank you for this far man.

  • User avatar

    Marius

    Hi, I downloaded the full code for the website and it's not looking like the live preview. I've downloaded the files in the folder with the MDB files. Maybe you've updated the package or one of the files is not loading but the navbar is completely missing. Could you let me know what is wrong? Thanks!

  • User avatar

    Bartłomiej Malanowski

    @Marius, I sent you an email. I'll help you with your problem

  • Afshin Karimi

    Perfect Tutorial I always had to change some codes in bootstrap css for Material Design.But this tutorial helps me lot. Thanks

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.