Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Logo in Header distorted
New Landing › How can we help? › Themeforest Theme Support › Dante › Logo in Header distorted
- This topic has 5 replies, 3 voices, and was last updated 10 years by Kyle – SUPPORT.
-
Posted in: Dante
-
May 6, 2014 at 6:22 pm #72737
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?
May 7, 2014 at 9:39 am #72909Hi,
Please provide me website URL to debug the issue .
Thanks ๐
With Best Regards
Swift IdeasMay 9, 2014 at 5:50 pm #73821This reply has been marked as private.May 11, 2014 at 1:19 pm #73927Hi,
Please upload small image size logo to be look perfect .
Thanks ๐
With Best Regards
Swift IdeasMay 12, 2014 at 9:58 pm #74333Do you happen to know what size that is?
We would like it to be the same size as the image that is in the menu bar that scrolls down.
Thanks!
May 13, 2014 at 10:11 am #74493Hi
you need to change the values for the width and height in the css to match your logo. I see that you have not done this, this is why your logo is squashed
– Kyle
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.