The default footer in the Divi theme includes a thin bar at the bottom which houses the credit links and social icons. Divi doesn't offer an easy way to adjust the height of this footer bottom bar. So here's how to easily customize the height of the default Divi footer bottom bar.
Adjust the height of the Divi footer bottom bar using Divi Booster
Divi Booster includes several options that can be used to adjust the height of Divi's footer bottom bar.
The first thing to be aware of is how Divi itself actually sets the height of the footer bottom bar. It'd done with padding rather than a height setting. Most of the height comes from the top / bottom padding set on the footer bottom bar itself, but some also comes from the bottom padding applied to the footer credits.
To allow full control of this, Divi Booster adds settings to change the padding on both the footer bottom bar and the footer credits, at:
- Divi > Divi Booster > Footer > Bottom Bar > Footer bottom bar padding
- Divi > Divi Booster > Footer > Bottom Bar > Footer credits padding
Like so:
By default, Divi sets 15px top padding on the footer bottom bar and 5px bottom padding on the footer bar. The footer credits have no top padding and 10px bottom padding. This allows the footer credits to be centered, with 15px total padding above and below. If you'd like to increase or decrease the height of the footer while keeping the footer credits and social icons centered as normal, I'd suggest only changing the Footer bottom bar padding, and keeping the top padding 10px larger than the bottom padding.
These options are available in Divi Booster v4.3.0 onwards.
Adjust the height of the Divi footer bottom bar using CSS
If you'd like to use CSS to adjust the height of the Divi footer bottom bar, you can use the following CSS:
/* Change the footer bottom bar padding */
#main-footer #footer-bottom {
padding-top: 20px !important;
padding-bottom: 10px !important;
}
/* Change the footer credits padding */
#main-footer #footer-info {
padding-top: 0px !important;
padding-bottom: 10px !important;
}Related Post: Adding CSS to the Divi Theme
As mentioned above, the easiest way to adjust the height of the footer bar while keeping the footer credits / social icons centered as normal is to just modify the footer bottom bar padding (leaving the footer credits padding alone) and ensuring that the top padding on the footer bottom bar is kept 10px larger than its bottom padding.
0 Comments