Add Floating Bar to bottom of the screen

A floating bar is a subtle way of presenting an important call-to-action to everyone who visits your page without taking up too much space.

You can see the floating bar here, fully responsive:

Here’s the template code for it, wrapped in a function so we can hook it anywhere we want. For simplicity, I chose to load this template to the wp_footer hook.

Paste this function into your child theme’s functions.php:

function md_floating_bar() { ?>

	<div class="floating-bar">
		<div class="inner">

			<div class="block-double-lr">

				<p class="alignleft mt-half small-title">Subscribe to the newsletter and download the free resources</p>

				<a href="#" class="alignright orange button">Click here to download</a>

			</div>

		</div>
	</div>

<?php }

add_action( 'wp_footer', 'md_floating_bar' );

…and this little bit of CSS into your style.css file:

/* SIMPLE FLOATING BAR */

.floating-bar {
	background-color: #fff;
	box-shadow: 0 0 9px rgba(0, 0, 0, 0.25);
	padding: 13px;
	position: fixed;
		bottom: 0;
		left: 0;
	width: 100%;
	z-index: 80; /* hide behind footer at bottom of page */
}


@media all and (max-width: 900px) {

	.floating-bar {
		/* display: none; //remove comment to hide on mobile */
		text-align: center;
	}

	.floating-bar .alignleft {
		float: none;
		margin-bottom: 7px;
		margin-right: 0;
	}

	.floating-bar .alignright {
		float: none;
		margin-left: 0;
	}

	.floating-bar .button {
		text-align: center;
		width: 100%;
	}

}

…and the floating bar is installed!

This simple little code will work on, really, any WordPress child theme and can be set to do all kinds of different things with template functions and conditional tags. If you use MD you can expect pixel-perfection right from the start thanks to helper classes.

Sound scary? I teach you how to achieve a lot with just a little coding skills in the new MDTV series.

3 comments add yours

  1. How do I show blogposts on homepage in cards like you’ve shown in this video?

    Thank you

    • Hey Sumit, you can go to Appearance > Themes > Customize > Layout and enable “show as blog teasers”.

  2. Hello sir,
    How u made the bottom bar appearing on the mobile version of your site ?

Leave a Comment