[Resolved] Fixed Footer with scrolling content

Home Forums Support [Resolved] Fixed Footer with scrolling content

Home Forums Support Fixed Footer with scrolling content

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #1867620
    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..

    #1868177
    David
    Staff
    Customer Support

    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;
    }
    #1868288
    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..??

    #1868349
    Ying
    Staff
    Customer Support

    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 🙂

    #1868385
    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..??

    #1868490
    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 “

    #1868564
    Ying
    Staff
    Customer Support

    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

    #1868762
    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..

    #1868775
    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

    #1868945
    David
    Staff
    Customer Support

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

    #1869459
    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..

    #1869583
    Ying
    Staff
    Customer Support

    Try this CSS instead:

    .site-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 50%;
        transform: translatex(-50%);
    }
    #1869922
    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..

    #1871156
    David
    Staff
    Customer Support

    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.

    #1871205
    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
    }

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.