Quick Footer Fix

More of an info for anyone who’s needed to quickly pop a footer on a page.

Open the theme.cass, drop in your tweaked version of:

.anvil-role-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: %color: Gray 600%;
  color: white;
}

add a role: ‘quickfooter’.

In your form you can drop a card at the end of your content, fill it with what you like (i.e. privacy link, blurb, etc) and set the role to quickfooter in role properties.

It’s nothing spectacular but handy to know, for me at least. Hope someone else finds it useful.

EDIT:

Don’t forget to add this bit!

@media (max-width: 1024px){
  .anvil-role-footer {
    position: relative;
  }
}
1 Like

Hi @james.patrick, I’ve now moved this to Show and Tell, as this topic doesn’t really belong in the Q&A section.

Other than that, if the role you’re adding is called ‘quickfooter’, then your css class should be .anvil-role-quickfooter instead of .anvil-role-footer!

2 Likes

It’s worth mentioning, for those new to roles who are implementing this, that you can also put the role CSS into the Native Libraries section of your app, between <style> and </style> tags. That leaves your theme.css untouched, which simplifies things if you have to update your theme.css file with a newer version, either to fix bugs in it or to update to a new theme.

5 Likes