Hi,
GOAL: “Sticky Footer”
My goal is to render an HTML element (NOT an interstitial) at the bottom of mobile screens such that it is always visible to the visitor. We’ll call this “Sticky Footer.”
----------
DETAILS
I want to create a Toolset Layout that contains:
Row 1: Post Content
Row 2: “Sticky Footer”
-A) Visual Editor cell (“Opt-in” button. Contains an opt-in plugin short code.)
-B) Visual Editor cell (“Buy Now” button. Contains a link to an external URL, and this URL will be pulled from a Custom Field on the Parent CPT.)
I want these two buttons (or one split button) to be “sticky” at the bottom of mobile screens, without covering up the theme’s footer.
----------
QUESTION
I’m having trouble getting the CSS to work as desired (most recent attempt below).
Q: How can I accomplish this, or can it even be accomplished, since the Toolset cells are inserted above the theme footer?
----------
ATTEMPTED CSS & JS
.sticky-test {
position: fixed;
bottom: 0;
border: 1px solid red;
}
jQuery(document).ready(function($) {
console.log('test2');
$('#sticky-test').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('footer').outerHeight(true))
}
}
})
});
We do not assist Custom Code of PHP; CSS or JS on this forum.
JS and CSS are required knowledge sets to use Toolset Successfully.
https://toolset.com/toolset-support-policy/
Now, to help you out here, I will try to put together what I would do.
I will assume you have a non-integrated Theme, which means, Toolset Layouts will replace the_content() part only.
You do not use any of this themes and the deprecated integration plugins, right?:
https://toolset.com/documentation/user-guides/toolset-starter-theme/
https://toolset.com/documentation/user-guides/layouts-theme-integration/
Hence, I would do this:
1. Create the Layout
2. Add the Rows
3. Add the cells to the Rows
4. To the "Sticky" Row, add a custom Tag ID and class.
Now address that Row in Toolset > Layouts JS/CSS with some simple Custom CSS like:
div#ID.row.sticky {
position: fixed;
bottom: 0px;
}
That will produce a Fixed (always on screen) element, that will stick to the bottom of the visible screen.
You can, of course, add margin, left/right and adjust bottom distances.
To have that CSS applied only on mobile screens you need to use @media queries:
hidden link
As said, this is a bit at the verge of Custom Code, hence I cannot develop a ready to go solution for you, as that would be like a personal programmer, but, I think with above steps you will be able to achieve your goal in no time.
Please let me know if you got any doubts related to Toolset!
Great, thank you!
I was applying the styling to the cell instead of the row.
