Troubleshooting Divi Bars: Header Spacing

Last updated: June 16, 2020

Divi Bars, created by Divi Life, is an excellent plugin that enhances the capabilities of the Divi Builder and the Divi theme. Divi Bars allows you to create beautifully crafted promo bars and slide-in components using the all the power and capabilities found within the Divi Builder.

Need a really cool GDPR compliance notification that covers a portion of the screen and has a click-to-close button? Absolutely. This is the tool for you.

You want a cool slide-in team roster with an email sign-up form? You can easily do it.

In fact, I would say that this is one of the top ten tools that I have purchased for enhancing the capabilities of the Divi theme. This plugin is great! You create these custom post types, add the content you want, format the information using the Divi Builder settings or via custom CSS, and then configure where and when the content will appear on your website.

There are a number of great setting with Divi Bars:

1. Insert content at top of page.
2. Insert content at bottom of page.
3. Enable URL Trigger
4. Display content on all pages or select pages.
5. Set cookies.
6. Time delay.
7. Hide close button.
8. Customize close button.
9. Disable by device type.
10. Set schedules.

However, there are some drawbacks.

Divi Bars Knowledge Base

One of the problems that I have with Divi Bars is the support documentation.  Not much in their knowledge base other than a “getting started” video and a “coming soon” notice.

The Divi Bars Knowledge base showing a link to a getting started video and a “coming soon” notice.

Another option would be to open a support ticket, but it is always nice to have a searchable knowledge base available for the self-serve option on common problems.

Troubleshooting Divi Bars

###

UPDATE FOR JUNE 2020

This issue with the header spacing has been resolved. Currently using Divi Bars 1.8.6.1. Remarked the code for adjusting the spacing in my CSS file. Spacing is now correct. 

###

The problem I was troubleshooting was related to Divi Bars and the spacing at the top of the page. With the Divi Bars plugin active and the bar active on the page, the padding at the top of the page was removed and the page title was moved up underneath the navigation menu.

I noticed the problem when working on an update to a social media management post.

You can see here in my sample image that the page title is pushed up underneath the navigation menu

With Divi Bars active, padding at top of page is removed causing page title to be forced underneath navigation.

Frustrating? Yes.

This certainly doesn’t work for me and needs to be addressed.

I would have disabled the Divi Bar, but it was needed as it contained my General Data Protection Regulation (GDPR) information and a link to my privacy policy.

So the first step was to determine what was causing this problem. Pages were properly formatted and the loss of padding seemed to appear after the latest round of WordPress updates.

First step was to check out the CSS. My website was formatted properly before, so I had to find the source of the change. So I headed to the Google Chrome element inspector.

To launch the element inspector, you can either right-click on the page and select the “Inspect” or you can simply hit the F12 key. Either one works great.

Here we see the Divi Bars CSS forcing the padding at the top of the page to 50px.

You can see where the Divi CSS code is forcing the padding at the top of the container to 50px using the !important property. This overrides the the default 120px padding that should be at the top of the page which resulted in a website page that was not properly formatted

The nice thing about the Element Inspector is that is shows where the code is coming from. You can see by the information in the screen grab that this code is from the Divi Bars plugin.

From here I dove into the css files for Divi Bars in search of the offending code. I found the code in the main.css file. The code started on line 74 and went through line 77.

The CSS code that was modifying the padding-top property.

Now, what to do?

It would not be a good idea to update the CSS contained in the plugin. Could definitely break something. If it did break, I would have to reinstall everything.

If it did work, it would be overwritten with the next plugin update causing the spacing issue to return.

So I thought it would be best to start with a safer plan of action.

Since this was a CSS coding issue, was thinking that perhaps I could override the code with my own custom CSS. If it worked, I wouldn’t have to modify the code contained within the plugin. Also, if the plugin changed, my custom CSS would remain and still provide the proper padding at the top of the pages.

Using the Theme Customizer located in the Divi section on the WordPress admin navigation panel, I drilled down into the settings to where I can add my own CSS code to the layout. I then copied the offending code from the main.css file and added it to the CSS configuration section. I then removed the unnecessary properties from the code and adjusted the properties that I needed and which directly affected the padding at the top of the page.

I also added notes to the CSS information so that in the future, I would know what the purpose of the code snippet was used for. There is nothing more frustrating that having to pour through code that you created years ago and trying to remember what it does.

Here the custom CSS is added using the theme customizer. The !important property is added to override the Divi Bars CSS.

A quick review of the page showed that the CSS change made a difference. By forcing the padding to be 150px, I was able to override the Divi Bars code. The padding at the top of the page was now correct for this page and all my other blog posts.

You can see from the image below that adjusting the padding at the top of the page made for a much cleaner website layout.

RESOLVED: Spacing issue that was the result of the Divi Bars plugin has been eliminated. Page title no longer hidden by menu.

So with the custom CSS, I can now globally adjust the padding-top and modify the page spacing across all pages. If later down the road I decide that the spacing needs to be a little bit less, I can go into my CSS editor and make some simple changes.