Linear Gradient in internet explorer

[lukapeteh]

Hello! I have an issue with a website I’m working on and I was hoping to get some help.

Before I dig into the problem I would like to inform you that I’m using the latest version of X theme.

Now about the issue, in the navigation of the website I have made the background of it a linear gradient. It works in all major browsers except internet explorer. I’ve tried different css selectors for multi browser support, but none of them work.

Summary

Here is the link to the website: https://metronik.netx.si/

Hopefully you can assist me with this issue.

Regards,

Luka

[rad]

Hi @lukapeteh,

Thanks for reacing out.

Gradient implementation for IE is different, and it would require more styling to make it a crossbrowser. You can generate a styling from this tool http://www.colorzilla.com/gradient-editor/

Then you’ll have to use Class based CSS instead of adding it through jQuery. Your current code is something like this

$('.x-navbar-fixed-top').css("background-color", "#232526");

Instead, you should use addClass and removeClass, example,

$('.x-navbar-fixed-top').addClass('gradient_navbar')

Then the resulting CSS that you can add to your global custom CSS is this

.gradient_navbar {
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

These are just samples, you’ll have to create your own styling based on that tools. This should serve as a guide and we can’t provide further customization.

Thanks!