Preview PHP HTML CSS JS
Click to copy

Add to your functions.php file

/**
 * Add floating bar to site.
 *
 * @since 1.0
 */

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' );
Click to copy
Click to copy

Paste into your child theme's style.css

/* 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%;
	}
}
Click to copy

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.

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 your comment

  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 ?

Labs

Get the latest MD sent straight to your inbox

There's always something new in the works in the MD Labs! Join the email list to get the newest content and releases sent straight to your inbox.*

Join the MD Newsletter

* I only email you when there's something new, or to share an exciting MD sneak peak.