Make footer with menu stuck on bottom

[Mary]

Can i get help from the community on how to align a row in my layouts to show up in the bottom of the page? I have a row with 4 columns being used as static links for footer navigation. When my page is smaller the row shows up towards the middle and I want it to always appear on bottom.

Thanks

[Chem]

With a bit of custom CSS I managed to convert a menu component into a navigation menu on the bottom as shown in the image below.

To do this, you’ll need to add CSS in two places.

1. Menu Design setting
   To get to the Menu design settings, right-click on the menu and click design
   

   
   
   Then, you’ll need to add the following to the CSS section

   overflow: inherit;
   position: fixed;
   bottom: 0;
   left:0;
   width: 100%;
   z-index:1049;
   margin-bottom:0;

2. The Layouts CSS setting

Finally a few finishing touches in the layout CSS

.navbar{
    margin-bottom:0;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding: 0;
    overflow: visible !important;
}

.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.navbar-nav>li {
    float: left;
    width: 20%;
    text-align: center;
}
.navbar-toggle{
    display:none;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: #417ed7;
    background-color: transparent;
}
.navbar-nav li>a>i {
    padding-right: 0;
    display: block;
}
.navbar-nav {
    margin: 0;
}

[Meyer]

Hi Chem,
This is great for menus, but how would I do this for a row with 3 columns?
As you can see below, the row is in the middle of the screen.

Thanks,

[Chem]

Hi @Meyer

Good point! You can accomplish this by using the following CSS in the Additional CSS section of that row.

overflow: inherit;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1049;

[andreas]

How would you stick the footer to the bottom of the viewport on shorter pages that wouldn’t fill the viewport but keep it at the bottom of the page (out of the way) if its a longer page. I know the new Layouts can do that but I have a few pages that just need an empty layout with just a footer at the bottom