Archived topic
Sticky Footer and/or sticky footer widgets are being overlapped
12 replies · Started by Richard on April 20, 2021
Hello,
I am extremely new to Generatepress and have to say its my favorite by far. I am having an issue with 2 widgets added in the footer bar or as 2 widgets in the section above.
Starting with Generatepress customization have the following:
2 widgets in footer layout: 1 custom html, the second a popup shortcode with the following css top section to make stick:
.footer-widgets{
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.footer-widgets {
background-color: rgba(14,12,18,0.7);
}
.site-footer .footer-widgets-container .inside-footer-widgets {
margin-left: 0 !important;
display: flex;
flex-wrap: wrap;
}
.inside-footer-widgets > div {
background-color: rgba(14,12,18,0.3);
margin: 2px;
flex: 1 0;
box-sizing: border-box;
}
.site-footer .footer-widgets-container .inner-padding {
padding: 2px !important;
}
.site-footer .widget-title {
margin: 10px -10px 10px -10px;
padding: 10px;
background-color: #000;
color: #fff !important;
}
@media (max-width: 768px) {
.inside-footer-widgets > div {
flex: 1 0 100%;
margin: 10px 0;
}
}
Upon scroll the footer is only displayed over text boxes any sections with images/widgets the footer is getting overlapped.
I'm also using elementor which might be conflicting. I made a custom footer with a new nav menu to include the buttons would like to have always in the foreground displayed.
This appears to be cleaner as the buttons align up nicely on the mobile site.
For a reference here is my site using the site wide elementor sticky footer:
https://stage.metamorphosiscentre.com/
If have any suggestions what could be missing would be greatly appreciated!
Thanks for the amazing work you guys do.
Hi Richard,
Give this CSS a try:
body {
display: flex;
flex-direction: column;
}
.site-footer {
z-index: 999;
}Let me know :)
Amazing! Exactly the functionality was looking to have in place. Thank You so much Ying!
No problem :)
Hi Ying, I just noticed sections which were full width like the headers are now boxed - unless is a caching issue? Purged it from the hosting side, along with clearing it locally. the home page is ok, tho the photo slider at the bottom is no longer full width along with the headers on all other pages? Thanks again
Hi there,
Hi Ying, I just noticed sections which were full width like the headers are now boxed – unless is a caching issue? Purged it from the hosting side, along with clearing it locally. the home page is ok, tho the photo slider at the bottom is no longer full width along with the headers on all other pages? Thanks again
The photo slider on the bottom has nothing to do with the site-footer.
It's added as a content within Elementor. If you changed some settings on Elementor's contain width/s, that will most likely affect the slider as well as it is added within an elementor section as shown here - https://share.getcloudapp.com/YEuRPnyE
Thanks Elvin, and for the breakdown in the video, took a copy and will review tomorrow. Apparently its very easy to mangling things with elementor, when have time would like to get more familiar with your theme engine and ditch the page builder...
Much appreciated.
... when have time would like to get more familiar with your theme engine and ditch the page builder…
If incase you're going to ditch the page builder, check out GenerateBlocks.
http://generateblocks.com/
It'll help a lot with the layout within the default WordPress block editor (Gutenberg).
No problem. glad to be of any help. :)
Awesome sir :) Last question:
body {
display: flex;
flex-direction: column;
}
Would there be a flex-direction option you know of that would prevent the top section from not being centered? You only notice if your resolution is over 1200 pixels in width. The column is on the left side of the page, while the remaining body is centered.
Thanks again Elvin.
Would there be a flex-direction option you know of that would prevent the top section from not being centered? You only notice if your resolution is over 1200 pixels in width. The column is on the left side of the page, while the remaining body is centered.
Not exactly sure what specific settings its coming from but it's from Elementor. If you inspect the page you'll see an inline style adding left value.
Can you try removing the "stretched" setting and see if it still occurs?
Or try copying the setting from the other sections and paste it on the section with issue.
So if I duplicate the next section underneath on the home page (blue button columns, replace them with a single column with the original text above - it appears to be fine. Possibly something to do with how the top section was made? Came from one of elementors library of section templates.
I only hope I don't have to update 40 plus pages manually like this :/
Thanks Elvin.
Is looking better sir. Apparently there were more than one section which was in "stretch" mode. Thanks again for your time!
No problem. Glad you got it sorted. :)
