Make footer with menu stuck on bottom

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

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;

  1. 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;
}

2 Likes

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,

Hi @Meyer

Good point! :slight_smile: 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;

2 Likes