Sign in

Sign up

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.

2. 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">

Now your website should look like on the image below:

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 domain. Currently, Dawid's main focus is design & web development. He designs and develop websites using Adobe Photoshop, HTML5 / CSS3, bootstrap, JS, Meteor, AJAX, PHP and SQL.

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more