How to add a full-width logo in the header

[glennrocksvb]

Blackhorse, did you change the right to left?

#header .toolbar {
    position: absolute;
    right: 0; [COLOR=#FF0000]/* Change right to left for RTL */[/COLOR]
    bottom: -30px;
    padding: 0;
    width: auto;
}

[Blackhorse]

Hello Glenn,

yes i did, as i faced a problem with search button and guessed that i had to change right to left, and it worked well except for some area not included in the banner as shown in the screenshot. Now once i get a code from you, i change right to left and left to right then test it.

[Blackhorse]

This is the exact code i have now

@media only screen and (max-height: 480px) {
#header .site-logo img {
max-height:none;
}
}

@media only screen and (max-height: 360px) {
#header .site-logo img {
max-height:none;
}
}

@media only screen and (max-width: 360px) {
#header .site-logo img {
max-width:360px;
}

#header .site-logo.header-edit-box {
text-align: center;
}
}

@media only screen and (max-height: 320px) {
#header .site-logo img {
max-height:none;
}
}

@media only screen and (max-width: 320px) {
#header .site-logo.header-edit-box {
text-align: center;
}

#header .site-logo img {
max-width: 320px;
}
}

#header {
position: relative;
height: auto;
}

#header .header-cell {
width: 100%;
}

#header .site-logo,#header .site-logo img {
max-width: 100%;
}

#header .site-logo {
padding: 0;
}

#header .site-logo img {
display: block;
}

#header .toolbar {
position: absolute;
left: 0;
bottom: -30px;
padding: 0;
width: auto;
}
@media only screen and (max-width: 440px) {
#header .site-logo.header-edit-box {
padding: 0;
}
}

====

I increased pixels to 4500 in width to allow it to fit if screen browser is 120 %

[Blackhorse]

I also changed this
#header .site-logo img { max-width: 304px; } to
#header .site-logo img { max-width: 320px; } but i am not sure if true as i didn't find any change !

[Merenguista]

hello glennrocksvb

i'm verry happy with this code.

But the full-width logo looks verry fine on the desktop but it's not responsive, it's not correctly aligned as you can see on this screenshot.


wat should i do to make it responsive ?

[Merenguista]

Here it is glennrocksvb :

http://www.e-taalim.ma/

[glennrocksvb]

Merenguista, try this:

.l-small #header {
    min-height: 0;
    margin-top: 0;
}
.l-small #header .site-logo {
    margin-top: 0px !important;
    margin-left: 0;
    max-width: none !important;
}

[Merenguista]

Now it's Ok it looks just fine. Thank you glennrocksvb you are an excellent coder.

[glennrocksvb]

Glad to help!

[hoangzu]

Hello Glenn,
Very silly question. With this your code where is locate of a image logo I have to upload to?
Thank you so much

[glennrocksvb]

The same way as you normally would. You just have to upload a wide logo that spans the width of the header.

[NumNum]

I'm using this code but the logo isnt 1200px, can i still using it and have the logo centered on the header? I looked in the code but could see where to place it center.

site is here.

[NumNum]

I tried making the header background transparent so the page background is seamless up to the logo image, but I am missing something as I can see the seam between the page and header background where the background image doesn't line up.

What am I doing wrong?

[glennrocksvb]

#header {
    background: transparent;
}

[glennrocksvb]

Or better, remove the background image value in the header_background stylevar.