Navbar and footer color adjustment

by Dawid Adach,

Final result preview
Live preview

    Once we have our basic code, let's adjust our navbar. We will adjust its color to match the color scheme of our pictures.

  1. Replace existing navbar classes in header.php:
    <nav class="navbar navbar-expand-lg navbar-dark light-blue accent-4">
    <nav class="navbar navbar-expand-lg navbar-dark elegant-color-dark">

    This will make our navbar dark. Now we will adjust footer.

  3. Replace existing footer classes in footer.php
    <footer class="page-footer light-blue accent-4 center-on-small-only">
    <footer class="page-footer elegant-color-dark  center-on-small-only">
  5. Now your website should look like on the image below:
  6. Baseline code

    If you want to learn how did we implement Navbar menu walker check the navbar lesson. You can also check the footer widget lesson.

    Now when are ready with our navbar and footer 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 & 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