Navbar Display Issues in Internet Explorer 11 and Safari


While my navbar looks nice in Google Chrome, Edge, and Firefox, it does not in Internet Explorer 11 or Safari.

The navbar items in Internet Explorer stack on top of each other for some reason:

The navbar items in Safari suffer spacing issues:

This is what the navbar looks like on google chrome and what it is supposed to look like:

Here’s the read only link:

Please let me know what I’m doing wrong.

Thank you so much!

Here is my site Read-Only: [[1]
(how to share your site Read-Only link)

Looks fine in my Safari (image below)…
One thing I can say though is you have a lot of inconsistencies in your navbar with those links and dropdowns. They are all different sizes (width and height). I would make sure they are all consistent and even. Each dropdown should be the same. Im telling you, you will run into problems later trying to manage so many different classes for one simple thing. Then you will run into continuity issues down the road.

Thank you for the feedback.

I’ve made your suggested changes. If you don’t mind looking at it again, I’d love to hear that I have corrected this issue.

Yes, that’s better. Only support link is still different. You can tell from the line underneath the link and of course the class name is sill different. Just from what I see.

I’m realizing after lurking several threads that the issue in Internet Explorer comes from flexbox

Does anyone know a work around for this issue? it would feel like a huge shame to have to redesign everything.

If you have to support it, then you have to address any flexbox bugs prevalent in that browser. You can add custom CSS as needed. There are a variety of ways. I used to use modernizr all the time.

I actually charge a premium to support IE now on modern sites (right in my contract).

Search the forums here for IE , Internet Explorer …

Can you suggest a css work around for this?

The references I provided are the CSS workarounds for flex issues with IE. I don’t believe it is possible for any one to assist you further without specifics from you.

The goal should be to get the site functional in the older browser, not making every element render like a modern browser does.

If you have a bunch of issues to fix and are overwhelmed, consider hiring someone who can assist you.

@bnorris - I see the org is a 501C. I am a music lover and will donate some personal time to help you work through this. PM me now for assistance.