The fixed footer.
If you’re wondering what a fixed footer is, well… it’s actually a little tricky to describe.
It’s where your footer looks like it’s on a layer behind the rest of your content, and is fixed to the very bottom of the page.
Once you scroll to the bottom of your page, your content layer appears to slide up the screen, allowing the footer to reveal itself.
It looks like this:
A fixed footer is an easy way to make your site feel more premium, and stand out from a lot of sites out there.
The best part is that it can be accomplished without having to dig into heavy code or JS libraries.
Here’s how to accomplish this effect using the Oxygen site builder for WordPress.
Step 1 – Create your main header & footer template.
Oxygen > Templates > Add New.
You can either create your own or import a header and footer from Oxygen’s design library.
Be sure to add the Inner Content element in-between your header and footer.
Your structure at this point should look like:
Step 2 – Create an inner content container.
For this to work, we need to have all our page content in a container that’s completely separate from the footer.
Oxygen’s „Inner Content“ element comes with it’s own container on pages, but not on archives, search results etc.
That means we need to create our own div to act as a container, and place the Inner Content element inside of it.
Step 3 – Create a Footer Spacer div.
Lastly, we’ll need a div to ‚create room‘ at the bottom of our page for our footer.
Simply create a div in-between your Inner Content Container and your Footer, and call it „Footer Spacer“.
Your page structure should now look like:
Step 4 – Add styling to your footer.
- You’ll need to specify a height for the footer. You can choose an arbitrary number (ie. 400px), see how it looks, and adjust, or use Inspect Element to more accurately gauge how tall your footer should be. Be sure to adjust the height as needed for responsive screen sizes.
- Set z-index to -1
- Set position: fixed, with Left and Bottom set to 0.
Step 5 – Add styling to the Footer Spacer.
- Set a bottom margin equal to the height you gave your footer (ie. 400px). Don’t forget to apply the margin to the responsive screen sizes as well.
- Set both the height and min-height to 0px.
- Set the width to 100%.
Step 6 – Add styling to the Inner Content Container.
- Set background to white.
- Set overflow: hidden.
That’s it!
You should now have a sweet looking fixed footer for your site.
Get the Fixed Footer Oxygen Template
Don’t want to start from scratch? Here are the shortcodes you can import directly into Oxygen:
Thanks for downloading the sample fixed footer template!
This will just help you take a live look at everything that was done in the video.
To import, create a new template in Oxygen, and paste the following code under "Shortcodes" in the Oxygen meta box:
[oxy_header ct_sign_sha256='61e871c1a2c747bdc3c8e5d593a3dc5b2e70801d18331fb048e3b6b65236816b' ct_options='{"ct_id":2,"ct_parent":0,"selector":"_header-2-14","original":{"sticky-media":"page-width","sticky_scroll_distance":"300","background-color":"color(4)","padding-top":"20","padding-bottom":"24","globalConditionsResult":true},"activeselector":false,"nicename":"Header","ct_category":"Headers"}'][oxy_header_row ct_sign_sha256='2e75b6f7c6a3d1e615ab8d7bace4ef018dceda4d129cc7694bc513a9ae7891d2' ct_options='{"ct_id":3,"ct_parent":2,"selector":"_header_row-3-14","original":{"globalConditionsResult":true}}'][oxy_header_left ct_sign_sha256='5a22ef3d07294e60a83893b5a10a52aa8655c42c377c90555bba1692d1655f34' ct_options='{"ct_id":4,"ct_parent":3,"selector":"_header_left-4-14"}'][/oxy_header_left][oxy_header_center ct_sign_sha256='86cb1daf3c53ca9df95c1beef7a404821a32ba8cefc44a7800da4af8f5390715' ct_options='{"ct_id":5,"ct_parent":3,"selector":"_header_center-5-14"}'][ct_link_2 ct_sign_sha256='7ead674ffd4847eb01769885f262727acc5c5f0edec6baace302cb4fb9e1f716' ct_options='{"ct_id":6,"ct_parent":5,"selector":"link-6-14","original":{"url":"/","transition-duration":"0.2","transition-timing-function":"ease","transition-property":"all","custom-css":"","globalConditionsResult":true},"hover":{"custom-css":"","transform":{"0":{"transform-type":"scale","scaleX":"1.05","scaleY":"1.05"}}}}'][ct_image ct_sign_sha256='e096403b3af88cf63ae34ff0be70134189f5efd432d694caf576236b2808f6f7' ct_options='{"ct_id":7,"ct_parent":6,"selector":"image-7-14","original":{"src":"https://hosting.oxy.host/wp-content/uploads/sites/26/2017/12/Logo@2x.png","width":"200","globalConditionsResult":true}}'][/ct_image][/ct_link_2][/oxy_header_center][oxy_header_right ct_sign_sha256='e04b1dc5cb22b473f6f89acf612159890df2f4f6ec98533ed4393d89c7451d45' ct_options='{"ct_id":8,"ct_parent":3,"selector":"_header_right-8-14"}'][/oxy_header_right][/oxy_header_row][oxy_header_row ct_sign_sha256='534c78c5381d8304b812596c398e3aba4b437977e9a8c117541a5fcfb57fd601' ct_options='{"ct_id":9,"ct_parent":2,"selector":"_header_row-9-14","original":{"globalConditionsResult":true}}'][oxy_header_left ct_sign_sha256='26f5da05f75d75b0aab21adade0a2173553043d202d420fffd044eb02e14a038' ct_options='{"ct_id":10,"ct_parent":9,"selector":"_header_left-10-14"}'][/oxy_header_left][oxy_header_center ct_sign_sha256='26163080b41d6348e55074385390f2b20f641db18538cb8a4bcf11c3f910bf1e' ct_options='{"ct_id":11,"ct_parent":9,"selector":"_header_center-11-14"}'][oxy_nav_menu ct_sign_sha256='f9e31d5b62f083e688e25782d84e6c0e4264cadbc6ca31cf58866ce873814226' ct_options='{"ct_id":12,"ct_parent":11,"selector":"_nav_menu-12-14","original":{"menu_responsive":"phone-landscape","menu_responsive_padding_size":"0","menu_responsive_icon_size":"24","dropdowns":"off","menu_dropdown_arrow":"off","menu_padding-top":"12","menu_padding-left":"20","menu_padding-right":"20","menu_padding-bottom":"12","menu_flex-direction":"row","menu_id":"2","font-family":{"0":"global","1":"Text"},"menu_color":"color(2)","menu_hover_color":"color(3)","menu_font-weight":"400","menu_responsive_icon_color":"color(5)","menu_responsive_icon_hover_color":"color(3)","menu_responsive_padding_top":"8","menu_responsive_padding_bottom":"8","menu_responsive_background_color":"color(1)","globalConditionsResult":true},"ct_nav_menu":"true","hover":{"menu_color":"color(3)","menu_responsive_icon_color":"color(3)"},"media":{"phone-landscape":{"original":{"padding-top":"12","padding-left":"12","padding-right":"12","padding-bottom":"12"}}}}'][/oxy_nav_menu][/oxy_header_center][oxy_header_right ct_sign_sha256='3ac650c84843aa31b20bf20093d609d1816872fcce087d29d7c3df8d26d0a42b' ct_options='{"ct_id":13,"ct_parent":9,"selector":"_header_right-13-14"}'][/oxy_header_right][/oxy_header_row][oxy_header_row ct_sign_sha256='d126b9629e5845d94cc6fbfd7f46b302a39c651e6105dfafbddae53bf585dda2' ct_options='{"ct_id":14,"ct_parent":2,"selector":"_header_row-14-14","original":{"globalConditionsResult":true}}'][oxy_header_left ct_sign_sha256='989eadf5b08775e9c6e9939220e9d0ab78a5c76eb1dd1f9295c0623b6a0286d7' ct_options='{"ct_id":15,"ct_parent":14,"selector":"_header_left-15-14"}'][/oxy_header_left][oxy_header_center ct_sign_sha256='ebde8c9ada8b103367ad8a7e4b32f80b02fc1abfc886e3218ee027c665070b1a' ct_options='{"ct_id":16,"ct_parent":14,"selector":"_header_center-16-14"}'][ct_div_block_2 ct_sign_sha256='bf741904ba3f3a4e048aa527997c1ff4f88579c2ddfbc238b029b87a29d11e42' ct_options='{"ct_id":17,"ct_parent":16,"selector":"div_block-17-14","original":{"flex-direction":"row","display":"flex","globalConditionsResult":true},"media":{"phone-landscape":{"original":{"flex-direction":"column","display":"flex"}}}}'][ct_link_button ct_sign_sha256='80bd5e89b1cc689a4dffb0f3ec04ba5730c6fe7762f505e98ac3194725488a08' ct_options='{"ct_id":18,"ct_parent":17,"selector":"link_button-18-14","classes":{"0":"hosting-simple-button"},"original":{"globalConditionsResult":true}}']Sign Up[/ct_link_button][ct_link_button ct_sign_sha256='c3ec5d474e1771aed136f0376af5d46039f6074ae7c6379cbc791b9171231ad3' ct_options='{"ct_id":19,"ct_parent":17,"selector":"link_button-19-14","classes":{"0":"hosting-white-outline-button"},"original":{"globalConditionsResult":true}}']Log In[/ct_link_button][/ct_div_block_2][/oxy_header_center][oxy_header_right ct_sign_sha256='f7998a858604f57999c95ac663aa9a9c4ac8f4502a0d0f3a500549e262d6e303' ct_options='{"ct_id":20,"ct_parent":14,"selector":"_header_right-20-14"}'][/oxy_header_right][/oxy_header_row][/oxy_header][ct_div_block ct_sign_sha256='dba12f02f44dbcbe4accd115f21830efa194629edf993b8863aa828a758b79ff' ct_options='{"ct_id":27,"ct_parent":0,"selector":"div_block-27-14","original":{"globalConditionsResult":true,"background-color":"#ffffff","overflow":"hidden"},"nicename":"Inner Content Container","activeselector":false}'][ct_inner_content_2 ct_sign_sha256='7265b2e558d2b1d53c2fa75cbe0a96b9e02741fdd28ea410ae215728592d0a4d' ct_options='{"ct_id":21,"ct_parent":27,"selector":"inner_content-21-14"}'][/ct_inner_content_2][/ct_div_block][ct_div_block ct_sign_sha256='07a402406ace6595a11429c1fc20f6bc6cd7278aba4453896a30a779b1b8f3f9' ct_options='{"ct_id":30,"ct_parent":0,"selector":"div_block-30-14","original":{"globalConditionsResult":true,"margin-bottom":"300","height":"0","width":"100","width-unit":"%","min-height":"0"},"nicename":"Footer Spacer","activeselector":false,"media":{"phone-portrait":{"original":{"margin-bottom":"400"}}}}'][/ct_div_block][ct_section ct_sign_sha256='0dccad8d830e1c0f543988734af75057ff0d8ed48e15f761c64b98b3cfc8bc87' ct_options='{"ct_id":22,"ct_parent":0,"selector":"section-22-14","original":{"background-color":"color(1)","container-padding-left":"40","container-padding-right":"40","flex-direction":"column","display":"flex","text-align":"center","align-items":"center","globalConditionsResult":true,"position":"fixed","left":"0","bottom":"0","z-index":"-1","height":"300"},"nicename":"Footer","ct_category":"Footers","activeselector":false,"media":{"phone-portrait":{"original":{"container-padding-top":"40","container-padding-bottom":"40","height":"400"}}}}'][ct_link_2 ct_sign_sha256='9506925d4b769e0ffe421e44d85c6e7af5354be6fe834b675a2f54ae599e1121' ct_options='{"ct_id":23,"ct_parent":22,"selector":"link-23-14","original":{"url":"/","opacity":"0.6","transition-duration":"0.2","transition-timing-function":"ease","transition-property":"all","globalConditionsResult":true},"hover":{"opacity":"1"},"media":{"phone-portrait":{"original":{"margin-bottom":"12"}}}}'][ct_image ct_sign_sha256='966b00debf27e82b22c05d3fcd699cf06aa5eb58ee9bf443eb66cb2847873333' ct_options='{"ct_id":24,"ct_parent":23,"selector":"image-24-14","original":{"src":"https://hosting.oxy.host/wp-content/uploads/sites/26/2017/12/Logo@2x.png","width":"200","globalConditionsResult":true}}'][/ct_image][/ct_link_2][oxy_nav_menu ct_sign_sha256='0c078afe6777965e336d7c13f8b814918145f4dcea0105c41c5625bfce4b8c14' ct_options='{"ct_id":25,"ct_parent":22,"selector":"_nav_menu-25-14","original":{"menu_responsive":"phone-portrait","menu_responsive_padding_size":"0","menu_responsive_icon_size":"24","dropdowns":"off","menu_dropdown_arrow":"on","menu_padding-top":"12","menu_padding-left":"20","menu_padding-right":"20","menu_padding-bottom":"12","menu_id":"2","menu_font-weight":"400","font-family":{"0":"global","1":"Text"},"menu_font-size":"16","menu_color":"color(2)","menu_hover_color":"color(5)","menu_flex-direction":"row","menu_responsive_icon_color":"color(3)","margin-bottom":"8","menu_responsive_background_color":"color(1)","menu_responsive_padding_top":"8","menu_responsive_padding_bottom":"8","globalConditionsResult":true},"ct_nav_menu":"true","hover":{"menu_color":"color(5)"},"media":{"phone-portrait":{"original":{"margin-bottom":"20"}}}}'][/oxy_nav_menu][oxy_social_icons ct_sign_sha256='1d19ab5343dded16b526031575b2b20d0bcb2ceee54601995f6b9b226ab330a2' ct_options='{"ct_id":26,"ct_parent":22,"selector":"_social_icons-26-14","original":{"icon-facebook":"https://facebook.com","icon-instagram":"https://instagram.com","icon-twitter":"https://twitter.com","icon-linkedin":"https://linkedin.com","icon-youtube":"https://youtube.com","icon-style":"circle","icon-background-color":"color(2)","icon-size":"32","icon-space-between-icons":"8","icon-color":"color(1)","icon-background-hover-color":"color(3)","globalConditionsResult":true},"activeselector":false}'][/oxy_social_icons][/ct_section]
After importing and saving, you will likely need to re-sign your shortcodes. That can be done at Oxygen > Settings > Security > Sign all shortcodes.