menu wrap
-
here is the code for the menu and menu wrap when it breaks as I would prefer to leave the code out of the live one as i dont want the menu broke as the site has to be viewable at all time.
#header-menu {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
!important;
}
#header-menu-wrap {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
!important;
}You are adding the
!important
incorrectly for thefilter
declaration… which is probably why it’s not working properly in IE.Try this instead:
#header-menu {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ) !important;
}
#header-menu-wrap {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ) !important;
}No still got the same problem
Did you refresh everything? Page, browser, site caches?
Quote:The main part of the menu the gradient works fine but when you go to any drop down part it shows that part white.you’re talking about the sub-menu. you can either add it like this
#header-menu ul li {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ) !important;
}or
.sub-menu {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ) !important;
}
#header-menu ul li {
background: none !important;
}Thanks ronangelo. I missed that part. Which is why I prefer having a link for a visual representation.
Yes I did refresh everything
@ronangelo No the sub-menu colour is fine and it shows when the menu-wrap is a solid colour but when I add the gradient it blankens out not even giving the options just a blank space with a border on the submenu but no clickable options as well. and when you move down the menu automatically closes
I would prefer not to have the menu set like this on the live site till i fix it as people wont be able to work the menus. I understand this limits how you can help me but if you use the code I supplied on your graphene website you should see the same.
- You must be logged in to reply to this topic.