Adding a Floating Footer Bar to the website is not working

HTML & CSS
1

I have been trying to add in a floating footer bar to my website. I have added the CSS to the CSS file and added the other code to my global footer. I see when I use “view page source” that it sees the code in my footer asking to load the DIV:floating footer" but nothing loads.

I am following a guide for wordpress but I use 3dcart. I do not have a style.css, I just have a CSS file. I am following this guide: http://www.wpbeginner.com/wp-tutorials/how-to-create-a-sticky-floating-footer-bar-in-wordpress/

I added the code in css like this [quote] /WPBeginner Footer Bar/
.fixedBar{background: #000; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:fixed; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold;}
.boxfloat{text-align:center; width:300px; margin:0 auto}
#tips, #tips li{margin:0; padding:0; list-style:none}
#tips{width:300px; font-size:20px; line-height:120%;}
#tips li{padding: 15px 0; display:none}
#tips li a{color: #FF0000;}
#tips li a:hover{text-decoration: none;}
}
[/quote]

I changed the sizes of the bar to see if that would help but it did not. If I take the CSS out, text appears in my footer based on the footer code:

[code]

[/code]

I figure I am having a conflict somewhere. This is the view I have in the HTML editor of 3dcart:

This is SOME of the stylesheet editor. Of course you can hit advanced view and see it all.

2

The website is http://www.balletbarrestore.com

3

Hi,

I know nothing of Wordpress but you have a rule here that sets the #tips li to display:none.

#tips li {
    padding: 15px 0;
    display: none;
}

That means you won’t see it.

If you remove the display:none then the footer should show but I believe the demo you linked to mentions this and that you should be showing a random tip with some jquery script which I don’t see in your page.

<script type="text/javascript">
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});
</script>

Re read the article and check you have everything in place correctly.

1 Like
4

What a curious approach since those tips are hard-coded in the footer.php anyway. But yeah, why serve a random tip from the first when you can use jQuery instead? :-/ Also, why is this a list when there’s only one item supposed to be visible anyway? It could be done as simple as

<div id="tips">
    <?php
    $tips = [
        '<a href="http://www.wpbeginner.com/">WPBeginner Link is the First Item</a>',
        '<a href="http://www.wordpress.org/">WordPress.org is the Second Item</a>'
    ];
    echo $tips[array_rand($tips)];
    ?>
</div>

Rant over, I’ll better get some coffee. :-)

3 Likes
5

I only want one message to display and honestly, I do not need it to be a link. I am just trying to set up a floating footer bar to display a message on. Is there a better code for this than the one I linked to?

6

I have got it to work. I simply read the tutorial wrong and needed to add in that PHP to the footer. Thanks!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.