Hi, my site works perfectly with this style, EXCEPT the background image doesn’t display on my iPhone… I’ve attached a screenshot. My custom CSS:
#logo a.mobile-menu-show i:after {
content: "MENU";
float: left;
margin-right: 12px;
font-size: 14px;
line-height: 20px;
font-style: normal;
}
/* white icons */
.icon-color-white .sf-icon {
color: #FFFFFF !important;
}
/* dark grey icons*/
.icon-color-black .sf-icon {
color: #999999 !important;
}
.page-id-7606 #top-bar, .page-id-7606 #top-header {
display: none;
}
.page-id-7606 #header-section:before {
background: transparent;
}
.page-id-7606 .header-wrap {
width: 100%;
position: absolute;
top: 40px;
z-index: 7;
}
.page-id-7606 #header-section, .page-id-7606 #header-section:before, .page-id-7606 #header .is-sticky .sticky-header, .page-id-7606 .is-sticky #header.sticky-header {
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
background: transparent!important;
}
.page-id-7606 #header .is-sticky .sticky-header {
background: transparent;
transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-webkit-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.page-id-7606 #logo img {
display: none!important;
}
.page-id-7606 #logo {
background: transparent url('http://162.219.249.105/~fusepoin/wp-content/uploads/2013/10/fusepointe_long3.png') no-repeat center left;
background-size: 215px 30px;
width: 215px;
}
.page-id-7606 #logo a {
height: 40px;
color: #fff;
}
.page-id-7606 nav .menu > li a {
color: #fff;
}
.page-id-7606 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-7606 .is-sticky #header.sticky-header.sticky-header-resized {
background: #fff!important;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.05)!important;
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.05)!important;
box-shadow: 0 3px 5px rgba(0,0,0,.05)!important;
}
.page-id-7606 .sticky-header-resized #logo img.retina {
display: block!important;
}
.page-id-7606 .sticky-header-resized #logo h1 {
color: #222!important;
}
.page-id-7606 .sticky-header-resized #logo a {
color: #333;
}
.page-id-7606 .sticky-header-resized #logo {
background-image: none;
}
.page-id-7606 .sticky-header-resized nav .menu > li a {
color: #252525;
}
.page-id-7606 .inner-page-wrap {
padding-top: 0!important;
margin-top: 0;
}
@media only screen and (max-width: 991px) {
.page-id-7606 #logo {
width: 90%;
margin: 0 5%;
}
}
@media only screen and (max-width: 767px) {
.page-id-7606 .header-wrap {
top: 0;
}
}
