[Resolved] Fixed Footer with scrolling content

[manaadiar]

Hi, I would like to create a fixed footer with scrollable content on my site – like the example in https://neilpatel.com/blog/the-complete-guide-to-internal-linking/..

Pls let me know what options are available in GP.. I am a Premium customer..

[David]

Hi there,

you can use a block element to create the content:

https://docs.generatepress.com/article/block-element-overview/

Use the GenerateBlocks plugin and built it inside a Container Block.
Give the Container Block an Advanced > Additional CSS Class of: fixed-footer
Set the block element – hook to: after_footer

Then use some CSS to fixed your footer:

.fixed-footer {
    position: fixed;
    left: 0;
    right 0;
    bottom: 0;
}

[manaadiar]

Hi David, sorry maybe I am missing something.. If you look at the below screenshot of the GenerateBlock Plugin, all am seeing is the documentation.. Do I do this using the Elements block..?? If so, the video you attached is different to the Elements that is in this version of GP..

blocks

How do I proceed..??

[Ying]

Hi there,

Tom didn’t demonstrate how to use Generateblocks in the block element, but yes, you can use Generateblocks in Block element.
https://docs.generatepress.com/article/block-element-overview/#generateblocks

You can use Generateblocks to build the content in the block element, then follow David’s instructions.

Let me know if you need further assistance 🙂

[manaadiar]

Hi Ying, think you didn’t look at the screenshot i sent.. I downloaded GPBlocks Plugin and when I ran it, it only shows the “documentation” but there is no program in the plugin to run..?? Pls look at the screenshot.. “You can use Generateblocks to build the content in the block element” – how do i build it when there is no program..??

[manaadiar]

Basically I want the option for a sticky footer like the theme has a sticky header.. How do I go about setting that up.. I want it to look like the sticky footer in this example – https://neilpatel.com/blog/optimizing-content/.. If I am able to make the “

” sticky and get a code to add an image within the bar, it will be fine..

[Ying]

I did look at your screenshot, and there’s nothing wrong with it, what you see is everyone sees when they click on Generateblocks.

Generateblocks is a Gutenburg editor, it can be used the same way as WP core blocks in Gutenburg environment, eg. Paragaph block/Image block.
Once you created the Block element, in the content field, you can add the layout as you wish.

I’ll suggest learning how to use Generateblocks first, here’re some documentations for its blocks:
Container block: https://docs.generateblocks.com/article/container-overview/
Grid block: https://docs.generateblocks.com/article/grid-overview/
Buttons block: https://docs.generateblocks.com/article/buttons-overview/
Headline block: https://docs.generateblocks.com/article/headline-overview/

And here’s a video that using Generatablocks in block element for your reference:
https://www.youtube.com/watch?v=HMhUo91RjsE&t=52s&ab_channel=GeneratePress

[manaadiar]

Ok let me rephrase my question..

I want an option for a sticky footer like the theme has a sticky header and also to be able to add an image to the copyright-bar.. How do I go about setting that up.. I want it to look like the sticky footer in this example – https://neilpatel.com/blog/optimizing-content/..

If I am able to make the footer sticky and get a code to add an image within the copyright-bar, it will be fine.. Pls let me know..

[manaadiar]

Ok, further to my above msg, I checked AGAIN.. Please see attached document that maybe makes the problem clearer to you..

Issue with Generate Blocks

[David]

Do you have the Classic Editor plugin on your site? As Block Elements and GenerateBlocks only works in the Block Editor.

[manaadiar]

Hi David, for this, can I not replicate the header which is a sticky header with scrolling content..?? That would be a much better and easier option..

Just with the footer, I tried with below code

.copyright-bar {
padding-bottom: 20px;
background: red;
bottom: 0;
z-index: 9999;
position: fixed;
text-align:center;
max-width:inherit
}

But problem here is that the width of this block is onlly 50% of the parent container.. If I change the width in the code as below, it works but if i resize the browser it changes size..

.copyright-bar {
padding-bottom: 20px;
background: red;
bottom: 0;
z-index: 9999;
position: fixed;
text-align:center;
width:79.5%
}

1) Pls can you assist with above code or
2) Advise how to set up a sticky footer like the sticky header that comes with GP..

Thanks..

[Ying]

Try this CSS instead:

.site-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translatex(-50%);
}

[manaadiar]

Hi Ying, thank you very much, that worked..

But 2 issues

1) The nav-links that shows next pages is missing now.. I didn’t make any changes any where for that..
2) I want to add an image 250x243px as part of the site-footer but maintain it to the left and overflowing above the text.. Like the link below.. Right now If I add the image as part of the site-footer code under theme options, it increases the height of the footer and band is too big.. I would like to keep the image as part of the fixed footer but keep the height of the footer like it is now.. So basically exactly as it is show now..

scrolling footer with image

Can you pls assist with this, thanks..

[David]

Try adding this CSS, to give the page some extra margin for scrolling:

body {
    margin-bottom: 100px;
}
/* Adjust for mobile */
@media(max-width: 768px) {
    body {
        margin-bottom: 150px;
}

The 100px needs to be adjusted to match the height of your fixed footer.

[manaadiar]

Hi David, it worked.. Below is the full code that I am using.. I have to use a -ve value for the margin-left below to make it look like what it is looking now (which is correct).. But I don’t think the -ve value is valid in the #bottom-of-page ID.. While the image is in the right place, there is also a grey gap between both containers (see the screenshot link below).. Can you pls let me know a solution around this.. Thanks..

gap

#bottom-of-page-container {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;

}
#bottom-of-page {
width: 100%;
height: 100px;
position:absolute;
margin-left:-400px;
margin-bottom:px;

}

.site-footer {
position: fixed;
bottom: 0;
width: 100%;
left: 50%;
transform: translatex(-50%);
}

body {
margin-bottom: 100px;
}
/* Adjust for mobile */

@media(max-width: 768px) {
body {
margin-bottom: 150px;
}

.fixedfooter {
position: fixed;
bottom: 0;
background-color: red;
color: white;
text-align: center;
}

.nav-links
{
float:right
}

[Author]

Posts