Archived topic

Move footer to inside content area

5 replies · Started by Cornelia Schneider on February 22, 2022

Viewing posts 1–6 of 6

February 22, 2022 at 8:31 am #2129373

Hi there,

I'm working on a website for a client who wants a specific layout which turns out to be more complicated to achieve than what I thought. Header is on the left, content on the right and the footer also needs to be on the right below the content are and NOT spread over both header and content. Is this possible and if so, how can I achieve this?

Here is a screenshot of what I have so far: https://prnt.sc/8Utc5GNDrXoW

Many thanks in advance,
Cornelia

February 22, 2022 at 8:36 am #2129391

Hi there,

Try creating the footer using a block element hook:
https://docs.generatepress.com/article/block-element-hook/

I believe the after_main_content hook should work :)

February 22, 2022 at 8:44 am #2129409

Hi Leo,

thank you for the quick reply :-). It works!!! Now how can I get rid of the regular footer? And is there a way to make the custom footer stick to the bottom?

Many thanks!!

February 22, 2022 at 12:53 pm #2129672

Now how can I get rid of the regular footer?

You can use a layout element to disable the footer.
https://docs.generatepress.com/article/layout-element-overview/

Make sure the disable element module is activated at appearance > GeneratePress.

To make the new footer stay at the bottom, try this CSS:

.page main#main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

But I think the better way to approach it is to keep the default site footer, then just modify this CSS:

.site-header {
		display: block;
                float: left;
		width: 300px;
		z-index: 300;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
		border-top: 10px solid green;
		min-height: 100vh;
	}

to this:

.site-header {
		display: block;
                float: left;
		width: 300px;
		z-index: 300;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
		border-top: 10px solid green;
		min-height: 100vh;
                position: sticky;
                top: 0;
	}
.site-footer.grid-container {
                width: calc(100% - 300px);
                margin-right: 0;
}

February 23, 2022 at 6:40 am #2130455

Thank you very much, both approaches work perfectly, exactly what I was looking for :-).

February 23, 2022 at 11:42 am #2130988

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.