Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1209712

    Hi,
    i added a buttonrow with two buttons into my footer page, gave them a custom id “cta-buttons” and added this code to Quick CSS:

    #cta-buttons{
    position: fixed;
    bottom: 0px;
    z-index: 9999!important;}

    Two issues:
    The buttons are not centered as they should be
    When you scroll all the way down to the bottom of the site, they switch underneath the images i put into the footer page, although i’ve set a really high z-index.

    Can you helb mit with this?
    Please see link in private content.

    Thank you
    Katharina

    #1210178

    Hey KaJoHa,

    The z-index on buttons would be useless because z-index should be applied on the section or container (div) that’s a sibling to #fullwidthsection.
    To fix it, the div where #cta-buttons is contained should have a higher z-index (20 in the code I gave) and then #fullwidthsection z-index should be lower (10, in the code) and set its position to relative since static won’t recognize z-index value.

    Please replace this code:

    #cta-buttons{
    position: fixed;
    bottom: 0px;
    z-index: 9999!important;}

    to:

    #cta-buttons {
        position: fixed!important;
        bottom: 0px;
        left: 0;
        width: 100%;
    }
    
    #top .container_wrap_first {
        z-index: 20;
    }
    
    #fullwidthsection {
        position: relative;
        z-index: 10;
    }

    Hope this helps.

    Best regards,
    Nikko

    #1210245

    That’s it! I’ve learned a lot now, the issue with the z-index for buttons i had several times before, so thank you!!

    best regards
    Katharina

    #1210311

    Hi Katharina,

    We’re glad that we could help you and give you more insight in using z-index :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘botton row position fixed not centered’ is closed to new replies.