Main Menu - Dropdown Issues

Hi Ruth,

The main issue with the header is that the CSS "overflow" property is being set incorrectly. The overflow property specifies what the browser does with content that is too big for the area of the page it is in.

In the case of your main header, it's currently set to always show scroll bars (even if nothing is too big for the area, as is the case here), which is the cause of the white gap you're seeing.

In the case of your menu module, it's currently set to hide any overflowing content. Since the drop-down menus are designed to extend outside the menu module area, they are being hidden and hence aren't displaying.

You can sort both of these issues by either tracking down where you've set the overflow property on these elements and resetting it to the default, or by adding the following CSS in "WP Admin > Divi > Theme Options > General > Custom CSS":

Code:

Log In or Sign Up to view this code.

For the gallery page with the different styles, I can see some additional styles being added, like so:

Code:

Log In or Sign Up to view this code.

These are overriding your normal styles and if they are deleted, the header then looks like it does on other pages. The styles show up in the combined Divi stylesheet, so I can't say for certain where they have been added, but given that they only affect that one page, I'd check in the "Page Settings > Advanced > Custom CSS" area for that page. They are intermingled with some styles with the "dnxte_" prefix if that helps any in tracking them down. Once you find the styles, delete them (just the ones shown above), and that should fix up the header on that page.

Hope that helps!

 

Hey Ruth, I'm glad that helped with those issues.

For the gallery page, can you first check in "WP Admin > Divi > Theme Builder" just to make sure there aren't actually two different templates (with two different headers) - one assigned to the gallery page and the other assigned to your other pages?

I'm hoping that is what's causing the issue because otherwise I'm not quite sure where the styles are be coming from. Since the CSS rules themselves aren't restricted to a particular page, they should mess up the header on other pages as well if they were added in any global locations (e.g. the main custom CSS box, or within the menu module itself).

 

Hey Ruth,

I think the reason it looks different on the two browsers is that the correct styles and the incorrect ones both have the same priority so depending on the order they are loaded in by the browser one or the other will apply. Personally, I see the incorrect styles in Chrome.

Since the styles are proving tricky to track down, another option is to override the styles using CSS to apply the correct values. I've had a go at coming up with the relevant CSS:

Code:

Log In or Sign Up to view this code.

If you add that to the gallery page, it should hopefully get you closer to the correct the styles there. Clear any caches after adding it.

I've probably not got everything looking identical (and I've ran out of time today), but give me a shout if anything still doesn't look right and I'll take a look when I'm next online.

Good luck!