Streaming live at 10am (PST)

Hiding / Showing Elements for IE / Edge Users


#1

Hi there.

I’m hoping you can help. We have created a site which works great in all browsers but IE.
The nav bar specifically is quite complex as it animates and changes when page is scrolled,

Is there a way to hide that navigation completely just for IE users and show an alternate simplified one for IE users. There are many other IE rendering issues but if we can fix this, it would suffice for now. I’m assuming users who are always in IE, won’t notice the issues as much as if also using Chrome but this one thing makes the site very jarring in IE. If we can figure out the nav issue, we will then use the same approach to hide/show elements for IE.

https://preview.webflow.com/preview/webcraft2018-2?preview=88a819c72917d317c766b3b3a4e2078f

Thanks,

Niall


#2

Hey @Niall_Mc_Dermott,

You need an if ie css rule.
Have a look at this :slight_smile:


In your example, i would design the alternate nav bar on webflow, display none it, and display block the class with if ie, while display none the main nav bar class.
Hope it’s not confusing for you.
Have a nice day,


#3

Thanks for this. I appreciate it.

However I can’t really make much sense out of it. How would I go about designing the alternate nav bar on webflow, display none it, and display block the class with if ie, while display none the main nav bar class?

Considering the link is about external style sheets.

I have tried many variations of code like this:

Also tried

The style is set to none in the Webflow designer and is a full screen fixed grey div at the highest Z level.

Thanks,

Niall

Note: I have included code as part of the message which is not showing so here is a screenshot of it