Final result previewLive preview
- Replace existing navbar classes in
navbar-transparentclass with following PHP condition:
- Adjust navbar and footer color.
Once we have set our baseline code let's adjust our navbar. We will use scrolling transparent navbar as shown in example before.
<nav class="navbar navbar-expand-lg navbar-dark light-blue accent-4">
<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:
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.
<?php echo is_front_page() ? "navbar-transparent" : ""; ?>
The last step is to adjust our footer
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">
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
Do you want to share?Facebook Twitter Google +