Pro Header Dropdown menu not opening, shadow, border radius and hidden top heading on rotate

[rbkerr]

Hello,
I have multiple strange artifacts in my Pro Header and Footer that I have spent a long time trying to fix.

A Pro update from 5.0.8 to the 5.1.5 resolved some strange homepage shadow, but point 1. below seemed to appear with the update.

I’ll post some photo’s (in a secure note if possible) to show what I mean.

1. The Header Inline Navigation has a shadow around it when viewed live, but it does not show in the editor and I want the shadow removed.

2. On small screens the drop down menu does not open on click (or touch)

3. The dropdown menu on small screens has a shadow and radius around it so the facebook logo and 3-line dropdowm icon have a round shadow, but this does not show in the editor (or have settings for shadow or radius) and I want the round edges and shadows removed.

4. When viewed on a small screen, then device rotated for a wider view of the page, the whole header company logo and dropdown icon disappears. The top H1 text ("You deserve better…) is also hidden at the top of page that can’t be scrolled to.

5. The footer has some “Brand Secondary” text (numbers in orange) when on most devices it shows correctly as Brand Primary.

Some of my Header Footer regions have hidden breakpoints for different screen size layouts but I haven’t specified these “bugs” and I can’t see where they have arisen.

Hopefully this is something I missed but I’ve gone a little silly finding how to resolve these issues.

Thank you, Rob

[christian]

Hey Robert,

We can’t login to your site because of this error. Please disable the verification.

By the way, it is unusual for the theme update to produce the mentioned issues. While waiting for your site access, kindly do the following to ensure that the issue is coming from Pro and not because of customization, 3rd party plugins and/or website optimization.

1. Testing For Plugin Conflict
2. Child Theme
3. Css/Js Customization
4. Disabling Cache

Thanks.

[rbkerr]

Thank you,
By my third site I should know to check these places, sorry for not having checked first.
It seems my hosts (10Web) CSS / JS page Optimiser plugin may have been to blame. Disabling it and WordFence resolved most issues. I mostly disabled Wordfence to resolve your login issue. I think it’s “Real-Time Wordfence Security Network” setting was the issue.

The only issue that remains is the footer ABN number is off colour in iPad and iPhone Safari. I tried adding a new section to the global block but it also now has a “Brand Primary” background to it (which it shouldn’t).

Hopefully you won’t have login issues now.

Thanks Rob

[marc_a]

Hey Rob,

I replicated your issue on the iPhone and iPad using the Safari browser. I found out that the number was turned into a link.

That being said, I suggest that you add this element CSS code in the text element.

$el a, $el a:hover {
  color: rgb(59, 122, 50) !important;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from using custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of our features theme.

Hope that helps.

[rbkerr]

Ok, thank you.

The green bar below the number (in your screenshot) is a new footer section that looks like it has a white background in the footer editor, but it has a green background in your screenshots. I tried to add this section to resolve the issue above. Is this something easy to resolve, something I have done in error, or maybe a Pro bug?

I’ll add the CSS but also try to remove the tel: link (though maybe it’s an iPhone/iPad safari auto-detect tel link mod in the browser)

[prakash_s]

Hello Rob,

I checked your setting it seems that the green background coming from the Footer container. I would suggest you go to your Footer —>Footer bar —>Container ---->Background.

Hope it helps
Thanks