1

Adding footer to the napili template

<div class="navbar navbar-inverse navbar-fixed-bottom "> Footer content</div>

is overlapping with some of the content on smaller devices.

I tried to achieve using SLDS but I'm unable to position it at the bottom of the page.

Any help is much appreciated.

4
  • The builder has a footer area .You can drop a Richtext there . Jul 24, 2016 at 21:26
  • Please add more info on how you are doing this ?Is it a lightning component? Jul 24, 2016 at 21:26
  • Yes Sir, It is a lightning component, updated my question. I did drop the component on to the footer area. I tried doing this way too developer.salesforce.com/trailhead/en/project/… but footer isn't fixed.
    – cartman
    Jul 24, 2016 at 21:27
  • You can use SLDS Align Utility .Not sure why you have used navbar there? Jul 24, 2016 at 21:50

1 Answer 1

1

Use the SLDS Align Utility to place the Text in center .

<div class="slds-align--absolute-center">This content will be positioned in the absolute center of its container</div>

Update :

I saw that the builder keeps you within the container which means you will have to write some custom styling inside your component like below

<div class="slds-align--absolute-center footerstyle">This content will be positioned in the absolute center of its container</div>

The Style.CSS inside the component is as below

.THIS {
}

.THIS.footerstyle {
   position:absolute;
   bottom: -500px;
   width:100%;
}

enter image description here

Using the builder I dropped a component like below

enter image description here

3
  • Mohith, my problem is I'm unable to fix it at the bottom of the page. developer.salesforce.com/trailhead/en/project/… If I use this the footer goes up if there is no content on the page. If I use bootstrap navbar-fixed footer is overlapping with the content in the smaller devices.
    – cartman
    Jul 24, 2016 at 22:45
  • Can you please screenshot and show where exactly you want .I feel like its CSS issue and we just need to get right CSS Jul 24, 2016 at 23:07
  • You can add some styling in your lightning component itself to force to it bottom center Jul 24, 2016 at 23:08

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .