I just started to help maintain our school's website found here: http://www.hawaii.edu/eall/

The problem is that when a Mozilla browser enters the site with https our navigation bar explodes to the whole screen and displays itself vertically and you can no longer see the header. It rarely happens in Chrome and works perfectly in other browsers. For example visit the site using this instead: https://www.hawaii.edu/eall/

In order to fix it in Mozilla, we've had to tell users to click the padlock near the URL and "disable protection for now" (so that they are now under http and not https) in order for the page to display normally.

What could possibly be the problem? Initially I was thinking it might be the plugins but I'm not too sure since I'm fairly new to WordPress. Any piece of advice would be greatly appreciated. Thanks in advance!


The problem is, browsers are blocking assets due to mixed content issues. while the user is visiting the site using SSL (https), much of the content, for example, some stylesheets, are being requested as non-ssl links (http). Check out your console in chrome dev tools for a listing of these issues. Basically, you'll want to be sure that these assets are being requested using SSL.

If, for some reason, you want to have the site under SSL and non-SSL (generally not advised, but that's another topic) - you can request the assets using the current protocol by leaving it off the request, rather than http://example.com/style.css or https://example.com/style.css you may simply request it is //example.com/style.css

In a perfect world, I'd use SSL everywhere and not have to worry about it.

  • Thank you @jmusal. I'll have to look into how to actually do it in WordPress. I'll get back with you. – Xirol Jun 29 '17 at 5:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.