PIT Designs Logo

Revealing Footer in Oxygen (CSS Only)

I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 10 months ago on May 24th, 2020. Last modified on May 26th, 2020

Related To:


Recommended
The best free alternative to Grammarly : ProWriteAid
Up to 35% OFF AliDropship Plugin

Revealing footer of a website is a nice effect, we used it on our Web design for startups page. The idea is to reveal the footer section as you reach the bottom of the page. Rather than having it static display.

In this tutorial I'll explain how to simply create this effect of revealing Footer in Oxygen builder.

Let's get started, with step by step. Or jump to tl;dr version.

Preparing the Inner Content

Generally a web page consist of Header , Inner Content (where you have all the text, images, etc..) and Footer.

We will mainly work with the last section, before the Footer.

In this example we're using a white backgroud with 200px bottom margin.

So the CSS for the section before the Footer is:

background-color: white; 
margin-bottom: 200px;

The Footer Section

Create the footer section, and apply this CSS code to it.

You can change the height vlaue as you wish.

position: fixed; bottom: 0; z-index: -1; height: 200px;

Final Step

In order for this to work, and the footer in behind all other sections (as we're setting z-index to -1)

You need to make sure all sections have a background, even if it's just plain white, you still have to actually assign a background color.


TL;DR Version:

How to create revealing footer in Oxygen builder (short version)

Step One

Add CSS to the last section (before the footer)
/** change values as suitable **/
background-color: white;
margin-bottom: 200px;

Step Two

Add CSS to the Footer section
/** change height value as suitable **/
position: fixed; bottom: 0; z-index: -1; height: 200px;

0/5 (0 Reviews)
Do we all agree that Coffee is the fuel that feeds the free content creating?
5 Ultimate Social Entrepreneurship Strategies for Business Startups

Millennials and Gen Y are the most socially responsible generations. Their zeal for social responsibility reflects in their penchant to […]

Easy Tips to Maintain Your WordPress Site

We love WordPress. It's the leading CMS for creating websites. Here are some Easy Tips to Maintain Your WordPress Site

COVID-19 and E-Learning Trends

The COVID-19 pandemic took the world by surprise, and what is even more surprising is that it's 2021 and the […]

5 Easiest Ways to Create Your Ecommerce Website

You can make an ecommerce website for a brick or a packet of tablets. But what is important is how […]

Proven Tips How to Improve Your Content Strategy with Influencer Marketing

One of the best ways to improve your content marketing is with influencer marketing strategy. This will help you reach […]

How to Increase Brand Awareness with Digital Content Marketing

The digital world is more powerful than ever – and its power keeps growing. If you want to survive in […]

Why is Ethical Leadership Important in Business

How many times have we come across peer pressure and do ethically wrong things? Or Like probably favor a candidate […]

Leave a Reply

Your email address will not be published. Required fields are marked *

menu-circlecross-circle