Skip Navigation

[Resolved] Problem displaying the DIVI main menu

This thread is resolved. Here is a description of the problem and solution.

Problem: After updating plugins, I am seeing an undesired hover effect on my main menu navigation elements with Divi active.

Solution:
A CSS override is necessary to prevent this hover effect:

#top-menu-nav>ul>li>a:hover, #top-menu-nav>ul>li>a:focus {
    background: none;
}
This support ticket is created 6 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

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 12 replies, has 2 voices.

Last updated by Francisco Ramón Molina Busquiel 6 years, 4 months ago.

Assisted by: Christian Cox.

Author
Posts
#581952
2017-10-24_17-14-00.jpg
2017-10-24_17-12-18.jpg

There is a serious problem in displaying the DIVI main menu.
If, for example, I have Toolset Views active, the hover of the menu options is shown as a square with background and the text of the selected option is not visible. If I disable all the Toolset plugins then everything works fine again.
Look at the screenshots.

Thanks for your help.

Best regards,
Francisco R.

#582099
2017-10-25_17-51-04.jpg
2017-10-25_17-49-13.jpg
2017-10-25_17-48-21.jpg

I changed the Toolset configuration from 'Toolset should load Bootstrap 3.0' to 'This site is not using Bootstrap CSS', now the menu works correctly, however, on the page of any woocommerce product there is a blank margin between the header and the title of the page. Nor does it solve the problem that the page takes up the full width of the browser.
I thought these problems were only shown when using the EXTRA theme, but the DIVI theme does not work much better either.
I can not use DIVI or EXTRA with Toolset.
This is a real disaster. I can not work this way.
Either you solve these problems or it is impossible to work in this way. ????
Look at the screenshots.
These problems should be immediately communicated to the developers of Toolset to resolve them, I can not wait for the new version to appear to see if the problems are fixed or not, and have to wait for another version after the next to finish fixing the problems. In this way it is not possible to work.
In Elegant Themes every week is released a new version of DIVI and EXTRA with fixes and great improvements. The least the Toolset team could do is to put a new version with fixes every week.

#582125
Screen Shot 2017-10-25 at 1.55.40 PM.png

Hi, I'm looking at the whitespace added into the header on your Product page, and when I look at the page source I can see a paragraph tag that seems to be causing this issue. In order to see why this extra paragraph tag is being added, I'll need to access your wp-admin area and check out your templates. If you agree, please provide login credentials to this site in the private reply fields here.

#582145
padding-bottom.png

There is a style in Divi's style.dev.css file that adds padding-bottom to all p tags. If I disable this style, the whitespace goes away. So I'm confused about why enabling Toolset would have anything to do with the whitespace here. It seems that it would be shown regardless, but I do not fully understand how your styles are set up so I'm probably overlooking something. I'm attaching padding-bottom.png that shows the p style in the inspector, and the effects of disabling it. Here's the file that includes the padding-bottom for all p tags:
hidden link

If you'd like a CSS override that resolves this whitespace, you may try adding this:

.product-template-default #et-main-area p:first-child {
  display: none;
}

I noticed that the paragraph tag does not appear in the header for the Servicios page, so the extra code is not needed here, but it does not cause any negative effects as far as I can tell.

#582155

I've done more research and it seems that the margin problem between the header and the title is a problem of the latest version of DIVI (3.0.84).
I have reinstalled the previous version and with this version this problem does not occur. I have communicated it to the DIVI support team. I'll tell you something.

#582411

Okay thanks, I'll stand by for your update.

#582611

The problem of the white margin between the header and the title has been solved by the support team of Elegant Themes, however the hover problem in the DIVI menu is a Toolset problem. If you enable 'Toolset should load Bootstrap 3.0' then the problem occurs, if you enable 'This site is not using CSS Bootstrap' then the problem does not appear.
The doubt I have is that if CRED uses bootstrap to improve the appearance of the form fields, if I have it disconnected they will look pretty bad. So, the logical thing is that bootstrap should be enabled.
What can I do with this problem in the DIVI menu?
Thanks for your help.

#583078

Hi, our support team is actively investigating this compatibility issue with Divi and the latest releases. Please stand by and I will have an update for you soon. In the meantime, I can recommend the following CSS override that should prevent the hover effect in your global navigation and allow you to keep Bootstrap active if needed:

#top-menu-nav>ul>li>a:hover {
    background: none;
}
#583107

Yes Christian. The CSS override works correctly.
In your expert opinion, what is your advice?
Is it convenient to use Bootstrap along with DIVI for CRED forms and multicolumn layouts rendering with Views or is it better not to use Bootstrap because of CSS overhead on the site?
Thanks for your help.

#583292

Christian,
Although it seemed that your CSS code solved the hover problem in the menu, it does not work correctly, often the hover background returns, which is very bad for the appearance.

#583324

Hi, I have an update that should remove the background on the focused state of the menu links:

#top-menu-nav>ul>li>a:hover, #top-menu-nav>ul>li>a:focus {
    background: none;
}

I tested this update on several pages and it seems to be functioning okay in my local instance, so please let me know if you find any additional menu background exceptions I can help resolve.

Is it convenient to use Bootstrap along with DIVI for CRED forms and multicolumn layouts rendering with Views or is it better not to use Bootstrap because of CSS overhead on the site?
I think that Bootstrap is well-optimized and works well in most modern browsers. If you use several of the features it provides, Bootstrap is most likely better than building those features yourself. The library's CSS and JS files are smaller than most images on your site. However, if you don't really need most of the built-in features, the full Bootstrap build may be unnecessary. For example, if you just want to use the Bootstrap grid and form elements, you could build a custom Bootstrap package and enqueue it yourself in a child theme:
hidden link

FYI - the difference between the default Bootstrap build and a custom build is negligible compared to the performance of other components of your site:
hidden link
Divi is much more of a performance problem than Bootstrap.

#583391

Yes. The hover now seems to work well. 🙂
Thank you very much for your help, information and advice Christian.

#587261

Thank you very much for your help, information and advice Christian.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.