Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 10, 2018 at 2:25 pm #939875
    eskitaco

    Hello,

    I am using the Restaurant theme and need some assistance with a couple of items related to the Footer area. I’ve tried searching for answers but have been unable to find anything that works. Would you prefer I create three separate ticket items for these or is this alright to combine all three? Logins are below.

    1. 1. Is it possible to create a ‘fixed’ Footer, similar to how a ‘fixed’ background image works? The code I found makes the Footer fixed but always visible. I don’t want that. I would like the Footer to be ‘behind’ the page content on every page, exactly like http://craftbeer.klevermedia.co.uk/. So as you scroll down the page, the page content scrolls up to reveal the Footer. Is this possible with the Enfold theme?.
    2. 2. See screenshot below. I am using an Icon List shortcode for Footer Widget #3, but the padding between the Title and the icon and phone number is greater than the other two widgets. How can I reduce the padding to make the widget content align with the other two widgets? I pointed to the discrepancy on the screenshot.
    3. 3. How can I decrease the length of the Socket border so that it is the same size as the column width (1/1)? I don’t want the border to stretch from side-to-side, I would like the border length to be just like the one shown on the link in #1. Based on the screenshot, I would like to remove the border within the two red boxes.

    Thanks for your time and assistance.

    – eskitaco

    • This topic was modified 6 years, 7 months ago by eskitaco.
    April 11, 2018 at 10:47 am #940391
    Nikko

    Hey eskitaco,

    Thanks for giving us temporary admin access, and giving us reference to what you want to achieve.

    1. This is done after I added this css code in Quick CSS (located in Enfold > General Styling):

    #top #wrap_all {
     padding-bottom: 364px;
}

#top #footer, 
#top #socket {
    position: fixed;
    bottom: 37px;
    left: 0;
    width: 100%;
    z-index: 0;
    float: left;
}

#top #socket {
    bottom: 0;
}

.avia-section, 
.av-layout-grid-container {
    position: relative;
    z-index: 2;
}

    2. It was part of the design, but this is changed by adding this css code:

    #top #footer .avia-icon-list-container {
    margin-top: 0;
}

#top #footer .avia-icon-list-container ul li {
    padding: 5px 0 0;
}

#top #footer .avia-icon-list-container ul > br {
    display: none;
}

    3. I have added this css code in Quick CSS:

    #top #socket {
    border: 0 !important
}

#top #socket .container {
    border-top: 1px solid #404040;
}

    Let us know if you need further assistance :)

    Best regards,
    Nikko

    April 11, 2018 at 2:03 pm #940501
    eskitaco

    Awesome, Nikko. Thanks for your time. While everything seems to be working on desktop, can you please view the site on mobile? The fixed footer now appears at the top of the mobile site and when you scroll down, the page content scrolls up, revealing the fixed footer again at the bottom. Can you please help me solve that issue?

    • This reply was modified 6 years, 7 months ago by eskitaco.
    April 13, 2018 at 11:21 am #941414
    Ismael

    Hi,

    Wrap the css codes inside a css media query so it won’t affect the mobile view.

    @media only screen and (min-width: 1024px) {
   /* move styles here */
}

    Best regards,
    Ismael

    April 13, 2018 at 3:01 pm #941530
    eskitaco
    This reply has been marked as private.
    April 16, 2018 at 6:32 am #942433
    Ismael

    Hi,

    Thank you for the update. There are some extra curly braces that you don’t need. We removed those. Please try it again. 

    @media only screen and (min-width: 1024px) {
#top #wrap_all {
padding-bottom: 364px;
}

#top #footer,
#top #socket {
position: fixed;
bottom: 37px;
left: 0;
width: 100%;
z-index: 0;
float: left;
}

#top #socket {
bottom: 0;
border: 0 !important
}

#top #socket .container {
border-top: 1px solid #404040;
}

.avia-section,
.av-layout-grid-container {
position: relative;
z-index: 2;
}
}

    Best regards,
    Ismael

    April 16, 2018 at 3:30 pm #942608
    eskitaco

    Hi Ismael,

    Unfortunately removing the extra curly braces didn’t solve the issue. The same mobile issue still exists on mobile portrait and landscape. Here’s what it’s doing:

    1. 1. The footer is ‘sticky’ at the top of the screen, but it only shows columns #2, #3 and the socket. Column #1 is missing.
    2. 2. The header image is ‘fixed’ behind the sticky footer and as I scroll down, the header image scrolls up behind the sticky footer.
    3. 3. Once the body content below the header image appears, the sticky footer scrolls up off the page as I scroll down past the first section of content (Master Brew).
    4. 4. Once I get to the end of the body content (Animated Numbers), the footer appears again, but it stops to only reveal column #3 and the socket… column #1 and column #2 are missing.

    I’ve deactivated all plugins but the issue is also still present on mobile. It works great on desktop. Thank you for your help in trying to correct the problem. I know this request is a functionality that’s not part of the Theme so I greatly appreciate your time.

    – eskitaco

    • This reply was modified 6 years, 7 months ago by eskitaco.
    April 19, 2018 at 8:01 am #943954
    Ismael

    Hi,

    Thank you for the update. The latest css modification, specifically the css media query, are invalid. The extra curly braces are still there. You did wrap the css modification above but you didn’t remove the previous css codes so they’re still in effect. We modified the css codes in the Quick CSS field. Please remove browser cache prior to checking the page.

    Best regards,
    Ismael

    April 21, 2018 at 3:43 pm #944918
    eskitaco

    Ismael… You and your team are the best. Thank you! Desktop and mobile seem to be working correctly. I greatly appreciate your help. Please close the ticket.

    April 23, 2018 at 3:09 am #945182
    Nikko

    Hi,

    Thanks for your kind words :)
    Glad that we could help! Please feel free to comeback if you need further assistance.
    Thanks again for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Footer Help – Fixed + Padding + Border’ is closed to new replies.