Dublin theme with footer width 100%

Dublin theme with footer width 100%

  

I'm working on a website that follows the Dublin template, but now I would like to add a full-width footer on the bottom of the page. Ideally, I would like the menu to be fixed and only would scroll up when reached by the footer, but I could do with a scrollable sidebar also. But I can't seem to make it work. anyone did that change to the Dublin theme, or made something similar?


Hi Bruno,

Can't you achieve it using CSS?


Bruno Silva wrote:

I'm working on a website that follows the Dublin template, but now I would like to add a full-width footer on the bottom of the page. Ideally, I would like the menu to be fixed and only would scroll up when reached by the footer, but I could do with a scrollable sidebar also. But I can't seem to make it work. anyone did that change to the Dublin theme, or made something similar?


Hi Bruno,

The Dublin theme layout structure is created like that.

If you want to achieve the footer to be at bottom you need to change the Dublin theme  default layout.


Regards,

Pankaj 


Bruno Silva wrote:

I'm working on a website that follows the Dublin template, but now I would like to add a full-width footer on the bottom of the page. Ideally, I would like the menu to be fixed and only would scroll up when reached by the footer, but I could do with a scrollable sidebar also. But I can't seem to make it work. anyone did that change to the Dublin theme, or made something similar?

Hello Bruno, 


For a quick fix, you can use the following code to make your footer full width 

.Footer {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
}


Now in .Menu element you have to add the bottom size equal to the height of your footer, in my case:

.Menu {
    bottom: 40px;
}


The same for .MainContent element, but here you have to add the value for padding-bottom: 

.MainContent {
    padding-bottom: 40px;
}


I hope this helps you :)


Regards