Pixelworkshop supports this item


This author's response time can be up to 2 business days.

16 comments found.

Can the Flexible Sticky Footer be modified to be a Top Menu?

There are quite a few changes involved for that, it could be an idea for the next update but I can’t promise. Anyway, this would be a custom job that I currently don’t have time to complete.

Can you please share an IE7 screencast? I’d like to see how horrible it can look. Thank you!

Well, except the animations and rounded corners that don’t show up, it’s more or less the same, there’s no huge difference.

Thank you for re-iterating your item’s description. I don’t feel insulted at all :)

Come on man, get off your lazy butt and fire up that vmware or that old dusty IBM laptop.

Hi there. Is this responsive? How does it work in tablets and mobile devices? Can you please share a live preview? Thanks. Mauricio Pereira

Hello, I can’t really test on mobile devices, I tried to make all the elements resize according to the screen size. Sorry but I won’t set up a live preview for this product.

looks pretty good – thanks… good idea

Is it possible to make the footer opaque? All my content is visible through the footer until it pops up, then it’s opaque. You can see this issue here: http://bit.ly/LRs150


Hello ! Sure you can, in the file footer.css, you’ll find 3 lines setting the opacity for the #footer_menu > li selector :

#footer_menu > li {
    filter: alpha(opacity=70);
    opacity: 0.7;

You can safely remove those 3 lines and it’ll be 100% opaque :)

Thank you for the quick response! I ended up needing to add a background-color too. Cheers!


Is it possible to transform a 4 column to 2 column + 2 column in tablet resolutions and 1+1+1+1 column in mobile resolutions; ie, if seing in a tablet the 4 columns would be distributed in 2 rows, in the first row the first 2 columns and in a second row the other 2 columns, and for mobile each column would transform into row!?

Maintaining the same behaviour, ie, they would only expand on hover.

I’m sorry for my bad english!!!


Hello, unfortunately this doesn’t seem to be possible, I’ve done a quick test but the bottom positionning makes things quite hard to handle.

Hi there, I am wondering if there’s any way to adjust or add a smoother transition with the jquery plugin. I tried incorporating “smooth tabs” <http://css-tricks.com/examples/OrganicTabs/> action to these tabs but I couldn’t get it to work. I’m just wanting it to slide up and down a bit smoother. Thanks in advance.

Hello, on my side this is a question beyond regular support and due to the originality of this footer, I can’t point you to any jquery plugin that could be close to what you need.

And I don’t know what would be the easiest : adapting an existing plugin or writing your own script… So I’d suggest you to have a look around and see what other tabs plugins are offered on the web.


This is an awesome item! I was wondering if there is a way to place the footer at the bottom but not using fixed position.

I want the footer to go below the website content. Fixed position works, but I dont want the footer to overlay the page content.

So by simply having it underneath thepage body will fix this for me, please let me know


Hello and thanks :)

In this case, you could use an absolute position so the element doesn’t get out of the flow of the page.

The fixed position is the only one that displays an element independently from the others.


Thanks for helping, I am still having an issue because the content is overlapping the footer on absolut position.

I will like the body of the page to “sit on top” of the footer. So just like regular content.


here is a quick example I put together in photoshop, ideally I will like the footer to behave like the example on the right.



I’m afraid that it wouldn’t be possible by placing the menu in the flow of the content (without absolute / fixed position), it’ll break the whole functionnality. Only absolute or fixed are possible.

Now a quick fix would be to add some padding at the end of your text so the blank space would make the menu fit well under your content.

sounds good, I’ll give that a shot! thanks a lot!

I would like to know how I can do to make it completely white with no transparency. Thank you very much, great job!

Hello ! You’ll first need to set the opacity to 100% at the lines 76-78 in the CSS :

filter: alpha(opacity=100);
opacity: 1;

Additionnally you can remove the lines 79-81 that make the inner shadow.

And lastly you’ll need to change the background color here :

#footer_menu > li:hover {

Just put #fff instead of #f4f4f4 and you’re done :)

Didn´t work. Can you tell me an email that I can send to you a code? Thanks!

There’s a contact form on my profile page.

Hello ,

I would like to locate the menu just high enough so that the browser status bar remains visible and does not overlap with the menu. As you can see from the screenshot the two overlap and I cannot allow that. Could you please help with this ?


Hi again ,

Could you please let me know what changes I need to make to activate the menu pop up on click and not hover?



Hello, with which browser is the menu bar overlapping with the status bar ? I can’t see it with Chrome or Firefox. Anyway, you could for example change the height of the visible part, it’s the line 75 in footer.css :


Here you can increase the 40px value.

To work on click, you’d need either a script to handle click events or go for a CSS3 solution but it won’t work on click on old browsers. I don’t have anything ready to be used and it depends on the scripts you already have. For example if you’re already using jQuery, you could write a script to open the panels. Here is a quick example but there are a lot of similar scripts all over the web.

Thanks for the first point , that helped. On the second one I do not know what to do as my knowledge of css and javascript is null. I do not use any javascript library in my project and all users will be using modern browsers only. Could you please offer a solution that would make it on click or give the option to hide the footer all together as the problem I am having is that user moving from bottom up towards some other content hover over the footer and it pops up even if they do not wanted to which is annoying. You have a similar product in the portfolio which you can hide and be left with a tab only , that solution would be also acceptable if it can be made to work with this footer. Please note that I am willing to pay you for your time on this one.



Hello, I haven’t planned any change or update for this menu so if you need something more advanced you can have a look to my portfolio where I offer 3 footers, they’re different from this one here but it could be an alternative for you.


I see 1px space in between some of the slides (5 sliders available) in safari on some screen resolutions. How to fix that?

Thanks, Milena

Hi, It is only on safari. The version I am testing it with is 6.0.5.

It is necessary that you look at it as it is stated in your plugin description that supports Safari 4+, so it is expected to work and if not a bug fix to be provided if the problem is related to the plugin.

Could it be something else interfering the positioning of the elements only in Safari?

Here is a link of the website: maxxistires.de.

Looking forward to getting back your comments, Milena

Hello, after having a look, I can see this 1px gap and it’s due to the fact that percentages are rounded. And it’s not something that can be fixed, some browsers handle percentages better than others. The only solution would be to use fixed widths in pixels but then you’d lose the fluidity of the whole menu. I’m sorry but this is typically the type of browser rendering problem that can’t be “fixed”.


Thanks for explaining. I was checking some forums regarding safari. It has some issues to fix actually. I will work on some workaround that at leasts handles the things in the necessary screen sizes.

Cheers, Milena

Fantastic!!! please, I made an adjustment to use only 1 column (but I’m not able to adjust the content within the column … could send me your email so I can send you the link to take a look?? Thank you.

Hello, please contact me through my profile page, I don’t have access to your informations and it’s better to not post email addresses in this public area.

Hi, great code once again!

I am having an issue when I use it on small screen as smartphones.

The menu is set up with 5 waves. On mobile, the menu get responsive opening 1 column full-width on touch which is great. My problem is I cannot close the column.

Could you give a hand with some quick fix as for example, when I click somewhere on the background of this column to trigger the transition the menu wave to go back in its original position.

Any thoughts on this?

Looking forward to hearing from you.

Hello and thanks ! Unfortunately Codecanyon doesn’t allow javascript files within CSS items. And this kind of problem can be fixed by using a custom script, there are several ways : you could add a close button within each panel, or make any visible panel closed when the user touches anywhere else on the page, etc.

If you already use a framework like jquery, I guess that a simple toggle script would do the job. At that time, when I released this item, I didn’t get much into mobiles, I just made it fluid.