Mary
May 15, 2020, 5:08pm
1
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
May 18, 2020, 9:57pm
2
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.
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;
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
Meyer
May 29, 2020, 5:16pm
3
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
May 31, 2020, 7:17pm
4
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;
2 Likes