javascript - When hovered over the Foundation Jquery menu (without dropdowns) a white patch appears -
i used foundation top bar create menu. none of elements have drop downs. if hover on item leave behind white patch :
this happens in google chrome. when tried in firefox works fine! how rid of patch?
here's link live website : http://secret-temple-3539.herokuapp.com/
the css file :
@import "compass"; $top-bar-color: rgba(17, 17, 17, 0.2); body{ font-family: 'comfortaa', cursive !important; } .top-bar-section{ a{ font-family: 'comfortaa', cursive !important; background: transparent !important; @include transition-property(all); @include transition-duration(0.3s); @include transition-timing-function(ease-in); &:hover{ background: none repeat scroll 0 0 rgba(17, 17, 17, 0.2) !important; @include border-radius(50px); color: #ffffff !important; } } } .top-bar{ z-index: 10 !important; -moz-animation-duration: 1.8s; -webkit-animation-duration: 1.8s; -o-animation-duration: 1.8s; -ms-animation-duration: 1.8s; animation-duration: 1.8s; li{ background: transparent !important; } } #title{ float: left; margin-left: -1000000000000000px; } #hometop{ height: 65%; background-image: image-url("leafyhomebg.jpg"); background-repeat: no-repeat; background-size: 100% auto; overflow: hidden; z-index: -1 !important; } #home{ overflow: hidden; height: 100%; background-image: image-url("homebg.jpg"); } .fixed-custom{ position:fixed; z-index: 99; width:100%; } #leaflogo{ display: block; height: 24%; margin-left: auto; margin-right: auto; margin-top: 8%; } .himsg{ color: #e9e9e9; font-size: 242%; font-size: 2vw; font-weight: 100; margin-top: 2%; text-align: center; &.linetwo{ margin-top: -28px; margin-top: 2.8%; } .emtxt{ color: #b3b3b3; } } .simgcont{ width: 20%; float: left; .simg{ border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 0 2px #828282; display: block; margin-left: auto; margin-right: auto; opacity: 0.7 !important; width: 43%; } } .simgwrap{ margin-top: 1%; }
ps : think links... go link again , refresh... see. have added links @ bottom , when hover them, again big patch appears!
i found problem. in piece of code :
#title{ float: left; margin-left: -1000000000000000px; }
when remove float, came normal. replaced float position: fixed;
, works fine!
thank tried help!
Comments
Post a Comment