Jump to content


Photo

How To Add Exit Button To Floating Bar

floating bar

  • Please log in to reply
2 replies to this topic

#1 drbarrywheeler

drbarrywheeler

    Newbie

  • MD Customer
  • Pip
  • 4 posts

Posted 14 May 2017 - 08:56 AM

Hi Alex,

 

I've noticed on a lot of mobile sites they'll do a floating bar at the bottom of the screen with a little "x" button on the side (like the popups in MD) that allows the user to make it the floating bar disappear. Is there an easy way to add this to the floating bar you so helpfully show on MD?

 

https://marketersdel...e-floating-bar/

 

I'm trying to fine tune my mobile site and test out some different tricks to see if I can get more clicks. I was thinking maybe something like this: http://materializecs...ransitions.html

 

What are your thoughts?

 

Thanks!

Barry



#2 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 15 May 2017 - 02:26 PM

Hey Dr Barry, great idea and one I'll have to take even further as closing something like this can be very useful.

 

The best I can do for now is add a close button that works very simply and can be closed on click, but will reappear the next time on page load. I hope that's ok for now. Check out this screenshot.

 

First, swap out the floating bar function in your functions.php file with this new one:

function md_floating_bar() { ?>

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

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

				<p class="alignleft mt-half small-title">Call us at (206) 960-4770 if you need assistance.</p>

				<a href="/contact-us/" class="alignright orange button">Contact us online</a>

			</div>

		</div>

		<span id="floating_bar_close" class="floating-bar-close">&times;</span>

	</div>

	<script>
		document.getElementById( 'floating_bar_close' ).onclick = function() {
			document.getElementById( 'floating_bar' ).style.display = 'none';
		}
	</script>

<?php }

add_action( 'wp_footer', 'md_floating_bar' );

I added in your own text and link alongside the new code to make the bar close on click.

 

Then, swap out your old CSS with these new styles:

/* 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 */
}


.floating-bar-close {
	border: 2px solid #ae2525;
	border-radius: 50%;
	color: #ae2525;
	cursor: pointer;
	display: block;
	font-size: 23px;
	height: 30px;
	line-height: 1;
	margin-top: -15px; /* half of height */
	padding-top: 3px;
	position: absolute;
		top: 50%;
		right: 26px;
	text-align: center;
	width: 30px;
	z-index: 50;
}

.floating-bar-close:hover {
	opacity: 0.8;
}

@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%;
	}

	.floating-bar-close {
		margin-top: 0;
		top: 13px;
		right: 13px;
	}

}

Let me know how that works!


- Alex
Check out the Kolakube blog or follow me on Twitter.

#3 drbarrywheeler

drbarrywheeler

    Newbie

  • MD Customer
  • Pip
  • 4 posts

Posted 17 May 2017 - 08:27 AM

Thanks Alex! It worked really well. I decided to do a version for mobile that didn't include the phone number using conditional logic (as well as remove it from pages like contact page):

function md_floating_bar() { ?>

<?php if ( !wp_is_mobile() && !is_page('35') && !is_page('18') ) : ?>

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

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

                <p class="alignleft mt-half small-title">Call us at (206) 960-4770 if you need assistance.</p>

                <a href="/contact-us/" class="alignright orange button">Contact us online</a>

            </div>

        </div>

        <span id="floating_bar_close" class="floating-bar-close">&times;</span>

    </div>

    <script>
        document.getElementById( 'floating_bar_close' ).onclick = function() {
            document.getElementById( 'floating_bar' ).style.display = 'none';
        }
    </script>
    
    <?php endif; ?>

<?php }

add_action( 'wp_footer', 'md_floating_bar' );

function md_floating_bar_mobile() { ?>

<?php if ( wp_is_mobile() && !is_page('35')  && !is_page('18') ) : ?>

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

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

                <a href="/contact-us/" class="alignright orange button">Contact us online</a>

            </div>

        </div>

        <span id="floating_bar_close" class="floating-bar-close">&times;</span>

    </div>

    <script>
        document.getElementById( 'floating_bar_close' ).onclick = function() {
            document.getElementById( 'floating_bar' ).style.display = 'none';
        }
    </script>
    
    <?php endif; ?>

<?php }

add_action( 'wp_footer', 'md_floating_bar_mobile' );

Thanks for your help! Deciding to use Marketer's Delight theme was one of the best business decisions I've made recently. Your support has been super helpful AND I have been getting about twice as many conversions as I was on my previous website!

 

Cheers,

Dr. Barry






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users