How put footer in the end of page

Post Reply
smartdev
Posts: 5
Joined: 16 May 2018, 17:15

17 May 2018, 02:10

How I can put footer in then end of page....?

User avatar
w00f
Posts: 195
Joined: 27 Apr 2016, 13:27
Location: 0.0.0.0
Contact:

21 May 2018, 16:12

Hi,

Avalon-NG already has a footer feature with the class named "layout-footer". View of the footer can be seen at the live demo of the theme.

Screenshot

If you have a different need for the footer, don't hesitate to specify so that we can help.

Regards,

smartdev
Posts: 5
Joined: 16 May 2018, 17:15

24 May 2018, 04:09

Please,


I need that the footer is always at the end of page and not according with the content as shown in the attached image

https://www.dropbox.com/s/hbwtr7mmn37s2 ... r.png?dl=0

merve7
Posts: 583
Joined: 12 Sep 2017, 10:44

28 May 2018, 10:28

Do you mean sticky footer? If so, you can try this scss;

Code: Select all

.layout-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
}

smartdev
Posts: 5
Joined: 16 May 2018, 17:15

07 Jun 2018, 02:39

Hello,

I put the code, but when display in mobile version it crash.

View image.

https://www.dropbox.com/s/kb6rykbzrchwq ... s.png?dl=0

merve7
Posts: 583
Joined: 12 Sep 2017, 10:44

11 Jun 2018, 10:57

Can you try to add

Code: Select all

	background-color: white;
in layout-footer

youssef512
Posts: 5
Joined: 01 Jun 2014, 13:40

30 Apr 2020, 03:37

Hi, I am facing the same issue, I don't want a sticky footer, I want a footer that is a the end of the content except when the content is two small (or empty) I want it a the bottom of the page (all footers should behave like this I had the same problem with another theme).

yigitfindikli
Posts: 382
Joined: 08 Aug 2018, 14:09

04 Jun 2020, 16:59

youssef512 wrote:
30 Apr 2020, 03:37
Hi, I am facing the same issue, I don't want a sticky footer, I want a footer that is a the end of the content except when the content is two small (or empty) I want it a the bottom of the page (all footers should behave like this I had the same problem with another theme).
Hi,
You can add to style.scss

Code: Select all

.layout-wrapper {
    min-height: 100vh;
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 50px;
}

.layout-footer {
    position: absolute;
    bottom: 0;
}

.menu-layout-static {
    .layout-footer {
        width: calc(100% - 235px);
    }
}

.layout-menu-static-inactive {
    .layout-footer {
        margin-left: 0px;
        width: 100%;
    }
}

.menu-layout-slim {
    .layout-footer {
        width: calc(100% - 75px);
    }
}

.menu-layout-horizontal {
    .layout-footer {
        width: 100%;
    }
}
Regards.

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests