Hi,
I was wondering how to fix my logo in the header. It is distorted. (see attached image for what I mean)
On the home page, I inserted in the long code for making the home page just like the “home 8: naked” version.
THE CODE
.page-id-4 #top-bar, .page-id-4 #top-header {
display: none;
}
.page-id-4 #header-section:before {
background: transparent;
}
.page-id-4 .header-wrap {
width: 100%;
position: absolute;
top: 40px;
left: 0;
z-index: 7;
}
.page-id-4.header-overlay .header-wrap {
left: 50%;
}
.page-id-4 #header-section, .page-id-4 #header-section:before, .page-id-4 #header .is-sticky .sticky-header, .page-id-4 .is-sticky #header.sticky-header {
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
background: transparent!important;
}
.page-id-4 #header .is-sticky .sticky-header, .page-id-4 .is-sticky #header.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-4 #logo img {
display: none!important;
}
.page-id-4 #logo {
background: transparent url(‘http://www.buccosroofing.com/wp-content/uploads/2014/05/buccos-black3.png’) no-repeat center left;
background-size: 92px 21px;
width: 92px;
}
.page-id-4 #logo a {
height: 40px;
color: #fff;
}
.page-id-4 nav .menu > li a {
color: #fff;
}
.page-id-4 #header .is-sticky .sticky-header.sticky-header-resized, .page-id-4 .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-4 .sticky-header-resized #logo img.retina {
display: block!important;
}
.page-id-4 .sticky-header-resized #logo h1 {
color: #222!important;
}
.page-id-4 .sticky-header-resized #logo a {
color: #333;
}
.page-id-4 .sticky-header-resized #logo {
background-image: none;
}
.page-id-4 .sticky-header-resized nav .menu > li a {
color: #252525;
}
.page-id-4 .inner-page-wrap {
padding-top: 0!important;
margin-top: 0;
}
@media only screen and (max-width: 991px) {
.page-id-4 #logo {
width: 90%;
margin: 0 5%;
}
}
@media only screen and (max-width: 767px) {
.page-id-4 .header-wrap {
top: 0;
}
.page-id-4 .header-overlay .header-wrap {
left: 0;
}
}
Thoughts?
.