- This topic has 3 replies, 2 voices, and was last updated 9 years, 11 months ago by .
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The topic ‘Header/Logo responsive Question’ is closed to new replies.
Home › Community Forums › Adapt Theme Support › Header/Logo responsive Question
Hi Wes, I’m working on a site and having some issues with the responsive sections for the header/logo. Here’s the link to the site.
I changed the header to be full width, here’s what’s in that section:
#header {
background-color: #ECCDF0;
min-height: 150px;
}
#header .wrap {
background: url(images/header.png) no-repeat;
min-height: 150px;
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#title-area {
float: left;
overflow: hidden;
padding: 17px 0 0;
width: 600px;
}
#title {
font-size: 48px;
line-height: 58px;
margin: 0;
}
In the two responsive sections, here’s what I’ve got:
@media only screen and (max-width: 600px) {
.header-image #title-area,
.header-image #title,
.header-image #title a {
float: none;
height: 100px;
width: 100%;
}
.header-image #title-area {
background: url(images/mobile-logo.png) top center no-repeat;
margin: 0 0 20px;
}
#title-area {
float: none;
text-align: center;
width: 100%;
}
and:
@media only screen and (min-width: 600px) and (max-width: 960px) {
.header-image #title-area,
.header-image #title,
.header-image #title a {
float: none;
width: 100%;
}
.header-image #title-area {
background: url(images/logo.png) top center no-repeat;
margin: 0 0 20px;
}
#title-area {
padding: 10px 0 20px;
}
I’ve used this basic code in the past for the responsive logo/header, but never changed the header wrap to be full width, so I’m guessing that’s where my issue is, but haven’t been able to correct it. Any suggestions would be most appreciated!
Here’s how to fix it (assuming you want the 2nd/responsive logo to center)
1. The #header .wrap logo needs to be set to “background: none;” in the responsive section of the css since its showing up twice behind the responsive logo.
#header .wrap {
background: none;
}
2. You also need to add width: 100%; to the #header .wrap as well. Currently it is still using the width: 960px; which is why this entire area isn’t resizing due to the fixed width. So adding the 100% percentage will allow the responsive logo to adjust/respond like its supposed to.
#header .wrap {
background: none;
width: 100%;
}
Thanks Wes, worked like a charm!
You’re Welcome