Transparent scrolling navbar

by Dawid Adach,

Final result preview
Live preview

    Once we have set our baseline code let's adjust our navbar. We will use scrolling transparent navbar as shown in example before.

  1. Replace existing navbar classes in header.php:
  2. 
    <nav class="navbar navbar-expand-lg navbar-dark light-blue accent-4">
    with:
    
    <nav class="navbar navbar-toggleable-md navbar-dark fixed-top scrolling-navbar navbar-transparent">
                  

    This will make our navbar transparent. You also probably noticed that after change footer started overlap header as below:

    Baseline code

    Don't worry about that now, we will fix it soon. Now we have add one condition to our navbar. Since our carousel with image will be visible only on our home page, we have to make sure that our navbar is also transparent only on home page. Otherwise, it will remain invisible also on post page where both navbar and background are white.

  3. Replace navbar-transparent class with following PHP condition:
  4. <?php echo is_front_page() ?  "navbar-transparent" : ""; ?>
    

    The last step is to adjust our footer

  5. Adjust navbar and footer color.
  6. As most of the components in MDB, navbar as well as footer can be easily adjusted using MDB Color pellete. Let's say that we want our navbar to use color secondary-color and our footer to use color secondary-color-dark. Simply add following classes to you navbar and footer correspondingly.

    
    <nav class="navbar secondary-color navbar-toggleable-md navbar-dark fixed-top scrolling-navbar <?php echo is_front_page() ?  "navbar-transparent" : ""; ?>">
    .
    .
    .
    <footer class="page-footer secondary-color-dark center-on-small-only">
                  
    Baseline code

    Note: in order to see navbar changing color from transparent, you have to add some dummy content inside index.php between <?php get_header(); ?> and <?php get_footer(); ?> . You can use multiple <br> tags or any other content to make your website long enough for scrolling.

    For the sake of this tutorial I will be using primary-color-dark for both - navbar and footer.

    Now when are ready with our transparent navbar we can move on to implementation of the carousel


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

Previous Lesson Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of mdbootstrap.com & brandflow.net is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us