This thread is resolved. Here is a description of the problem and solution.
Problem: I would like to create a sticky footer from a container block.
Solution: Load the Bootstrap 4 library and add a CSS class of fixed-bottom to the container element.
Relevant Documentation:
https://getbootstrap.com/docs/4.6/utilities/position/
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 16 replies, has 2 voices.
Last updated by 4 years, 3 months ago.
Assisted by: Christian Cox.
Hello, I understand you would like to implement a sticky footer on mobile devices using a Container block. Sticky effects are not built-in to Toolset Blocks, so there's no quick and easy way to do this directly in the Block Editor. One option is to use custom CSS to achieve this effect. You would write your own custom CSS and include it in your child theme, or in the Appearance > Customize > Additional CSS panel. Then add a CSS class to the container block to apply those custom styles.
Another option with less coding required is the sticky effect provided in the Bootstrap library. Toolset can load that library for you automatically if you go to Toolset > Settings > General tab and choose the option to load Bootstrap 4.
Bootstrap Position effects like fixed-bottom are documented on the Bootstrap site here if you'd like to know more about the technical details: https://getbootstrap.com/docs/4.6/utilities/position/
Once you've loaded the library, you can use the Block Editor configurations panel to apply the fixed-bottom CSS class to a container block to fix it to the bottom of the screen (screenshot attached showing this configuration). Please note you must type fixed-bottom, then press Return or Enter to add the CSS class to the container block.
In this case, you may need to create two similar container blocks - one for displaying on mobile, and another for displaying on larger screens. Apply the fixed-bottom class to the container displayed on mobile, and do not apply the fixed-bottom class to the container displayed on larger screens. When you select the Container block in the Block Editor you can find configurations for hiding the element on certain screen sizes in the Advanced panel in the right sidebar.
Let me know if you have questions about this approach, and we can discuss implementation in more detail.
And if I load in the Bootstrap 4 library, how will that impact the website in terms of speed, load time, etc?
I can tell you that the Bootstrap library loads two additional files by default - one minified JavaScript file and one minified CSS file - and the total added filesize is less than 300kb. If you'd like to compare actual speed and load times before and after, you can use an online tool like hidden link to run tests before and after activating the library.
Please provide a more detailed solution for me.
- Start by activating the Bootstrap library in Toolset > Settings > General tab
- Edit the Content Template that includes this Container block with buttons
- Select the Container block in the Block Editor and use the 3-dot options menu to Duplicate the container block (see duplicate.png)
- With the duplicate Container block selected, open the ID & Classes panel in the sidebar menu. This container will be displayed on mobile devices, so add the fixed-bottom class as I described earlier and showed in the screenshot Screen Shot 2021-02-02 at 3.39.48 PM.png.
- With the duplicate Container block still selected, open the Advanced panel in the sidebar menu. Click the desktop icon and toggle on "Hide element" to hide this sticky container block on desktop screen sizes. If you want to hide the sticky container block on tablet sizes, click the tablet icon and toggle on "Hide element" again for tablets.
- Select the original Container block in the block editor and open the Advanced panel in the sidebar menu. This container will be shown on desktop sizes. Click the phone icon and toggle on "Hide element" to hide this block on mobile devices. If you want to show the sticky footer on tablet sizes, click the tablet icon and toggle on "Hide element" to hide this block on tablets.
