Sticky Footer Navigation for Flatsome


I really like adding a sticky footer to my website. You see this feature in a lot of apps. It is an easy way for your visitor to navigate between pages on mobile devices. You should put your website’s frequently visited pages on the sticky footer navigation or pages that you would like your visitors to visit. I recommend for you to review the whole post once before following along step by step.

If you add the sticky footer to your Flatsome website I would like to feature it on the blog post. Send me you the URL of your website when it is done and I would love to feature it on this post!

First, you should take some time and pick out the icons and pages. You should download your icons in the PNG or the SVG file format. I recently found that the SVG format improves performance on my website when I changed my social follow icons to SVG. The downfall of SVG is that you cannot see the icons in WordPress’s media gallery.

Here is where you can get icon from

FlatIcon

iconmonstr

The pages that I will be using in the tutorial are Home, Shop, Cart & Checkout. So go ahead and make a mental note of the pages and find the icons to match. Let’s make this happen!

1. Create your footer block

1: Create a Block. 2: Give the Block a name. 3: Paste in below code then click publish. Make sure you select text in the WYSIWYG editor when pasting the below code.

When you are done it should look something like this.

2. Now edit the footer block in the UX Builder

Now open this block in the UX builder. You will see a row that contains 4 columns. Inside each column, you will have an icon box inside.

Simply you will add an icon, replace the text and add the link to the desired pages.

When you are done it should look something like this…

3. Paste the block’s shortcode in footer 1 or 2 widget area

Paste the shortcode for the block in either footer 1 or footer 2 by using an HTML widget. If you happen to be using both you will have to sacrifice one. But I doubt you are using both Footer 1 and 2 widget areas.

**Make your footer columns set to 1 and the footer is enabled**

Apperance>customizer>footer>edit footer widgets>footer 2 or footer 1> add widget>HTML then paste in the block shortcode.

Alternatively, you could navigate to appearance>widgets, footer 1 or 2. Add custom HTML and paste in the block’s shortcode in there too. It does the same thing.

Now go ahead and click publish. Next, we will be adding some custom CSS that makes this stick to the bottom of the window.

4. Add custom CSS

Here is the CSS code:

flatsome>advanced>custom CSS

If you paste the blocks shortcode in footer 2 replace the CSS “footer-1” to “footer-2”

If you do not want it to be transparent set the opacity to 1 or delete the line of code.

5. Background color and text color

You can change the background color and text color in the customizer. This is the best way to do is inside the customizer.

Screenshot location: apperance>customizer>footer>

To make the text color in the footer white or black you can toggle the footer text color in the customizer & you can change the background color of the footer element here.

THE END RESULT

REMOVE ON CART AND/OR CHECKOUT PAGE

Now, you may want to remove the sticky footer on the cart and checkout page. If you wish to do so here is the CSS code 🙂 What we are doing is removing the sticky footer and only targeting the WooCommerce cart and Checkout page. And then we are removing the margin on these pages so there is not a funky gap below the footer.

ONLY DISPLAY ON MOBILE

If you wish for the sticky footer to only display on mobile you can easily do this with some custom CSS. First, we will hide it on all screens using “display: none;” and then choose what screens we want for the footer to be displayed using “display: block;”. We then will have to update the footer margin on the different screen version to avoid a gap on screens where the sticky footer is not displayed. In the previous CSS, you already set a margin-bottom. In the “all screens” section you should just change the margin-bottom to 0px or delete the line of code. Here’s the CSS.

This screenshot shows the CSS code where this sticky footer nav will only be displayed on tablets and down. Say if you only wanted it to only be displayed mobile just move the CSS code in the “tablets and down” section to the “mobile only” section.  In this case, we can leave the tablet CSS input blank because that is being handled by the CSS in “all screens”.

Any questions I would love for you to join my Facebook Group

Top
LIGHTS
>