Hey team,
Can’t work out how to make my footer transparent and overlap the page content.
It seems that the same settings for Header are not available for Footer.
Any clues?
Header options to create transparent overlapping header:
Footer options in the same section:
Hello There,
Thanks for writing in! The footer has a different set up than the header. You cannot make it fix or make it overlap with the contents out of the box. You will need custom css to do so. Would you ming providing the url of your site so that we can take a closer look?
Best Regards.
bricolage.com.au/home is where I’m editing the footer.
Essentially what i’m wanting to achieve is to always have a small Facebook and instagram icon in the bottom left hand corner.
I’m using 100% height sections.
Is there another way to do this? Create floating icons down the bottom of screen?
Hey there,
You’re using the original X footer and not the footer builder. Anyway, you can achieve that by setting your footer bar’s position to absolute, add an ID and target it to have a bottom setting of 0.
Here is a sample of how it would look like.
The custom CSS used for that is this:
.x-colophon.bottom {
background-color: transparent !important;
position: absolute !important;
bottom: 0 !important;
}
Please note though that I am not encouraging the use of custom code unless you’re knowledgeable with it. Also, we do not support issues arising from the use of it. I gave that for demonstration only of what you can achieve with controls in Pro.
Thanks.
Boy did this help me. getting rid for the white space and centering the text with
.x-colophon.bottom {
background-color: transparent !important;
bottom: 0 !important;
}
wish it were a simple button or option
might anyone know how to get rid of the grey “hr”
Hi Erick,
Thank you for writing in, please add this to Theme Options > CSS
.x-navbar,
.x-colophon.top,
.x-colophon.bottom {
border-width: 0;
box-shadow: none;
}
If you have a follow-up question, we kindly ask that you write it in a new thread.
Cheers!
OMG, I was struggling with that THANK YOU SO MUCH.
will this get rid of the white block in the middle from the 1st element properly ?
.entry-wrap {
display: block;
padding: 0px;
background-color: rgba(0,0,0,0.0);
border-radius: 4px;
box-shadow: 0 0.0em 0.0em 0 rgba(0,0,0,0.135);
}
Hi There,
Please try with this custom CSS:
.entry-wrap {
box-shadow: none;
background: transparent
}
If you’re still having the issues, please create a separated ticket instead.
Many thanks.
Sorry, the mobile phone side the header still has a white header @ http://kidsbalance.bike still shows white
and not transparent to see the image behind such as it doe son the desktop version.
please what am I missing to get this on the mobile view to be transparent?
.x-navbar,
.x-colophon.top,
.x-colophon.bottom {
border-width: 0;
box-shadow: none;
}
Hi Erick,
Please create a new thread and clarify what you’re trying to do on that thread. As this thread is almost one year old and your query is different from the original poster.
Thank you,