How to add a full-width logo in the header

[NumNum]

Coffee sent.

[glennrocksvb]

[ChileCaliente]

Hello Glenn
I have problem with the breadcrumb menu after the 5.5.0 update, the menu goes to the right side, check this post please https://www.vbulletin.com/forum/foru...013-menu-moved
Can you maybe see if this script need to be up datet for 5.5.0?

Thanks in advance
ChileCaliente

[glennrocksvb]

Does the issue also happen in the default style?

Anyway, try this:

#breadcrumbs { clear: both; }

[ChileCaliente]

Does the issue also happen in the default style?

Anyway, try this:

#breadcrumbs { clear: both; }

Hello Glenn
I tried the default style and all perfect there...
I put your code in the css_additional and voila, all perfect again...

Thanks for help Glenn...
ChileCaliente

[imager]

Hi Glenn, looking at the site displayed on my monitor (100% in display settings) the forum (vB5.5.3) is 2400 pixels wide. I have tried your CSS with both 1200 and 2400 pixel wide graphics uploaded as the logo and they still only occupy half the width of the header.

What am I doing wrong?

IB

PS - please have a look at fourthirds-user dot com/forum/

[NumNum]

In your additional css try changing;

#header .site-logo img {
    max-height: 32px;
    width: auto;
}

To this;

#header .site-logo img {
    max-height: 32px;
    width: 100%;
}

I think you will find it makes the logo grainy though.

[imager]

NumNum Thanks for that - actually that code isn't in Glenn's original (or am I missing something) I did realise the maximum logo height (it's 2400x250) was too small and I fiddled around and finally got the logo to go full-width, but as you predicted, it's obviously aliased - basically not acceptable. I've left it like that for now if you'd like to have a look?

This is the code currently as it is (I'm really not a CSS coder so I'm sure there could be some mistakes there!

@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:344px;
    }

    #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: 304px;
    }
}

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

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

#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;
    right: 0;
    bottom: -30px;
    padding: 0;
    width: auto;
}

@media only screen and (max-width: 440px) {
    #header .site-logo.header-edit-box {
        padding: 0;
    }
}

[NumNum]

Your site logo is 620px × 65px raw. If you can make it 1203px x 126 raw it would look better.

[glennrocksvb]

NumNum is right.

[imager]

I uploaded 2400 by 250 though, so maybe it has been resized? But not by me - very puzzled!

[imager]

I'm still stuck - I resized the original 2400 wide logo graphic to 1203 wide and also 1200 wide - none of them looked sharp.

Does vBulletin resize when a logo graphic is uploaded?

[imager]

OK, I have just discovered the link between the graphic file type allowable parameters set in the CP Image Attachments settings - and the requirements for logo graphics! Now it all makes sense and the 1200 pixel version of my logo (PNG) now looks a lot better.

[NumNum]

Outstanding!



Looks great!

[mark1275]

Question.

Running VB 5.6.4 Dark style.
Put in the code you provided.

I get this

Where the red is, the picture is to small (original 1500px)

It leaves a piece transparant, because i can click on the red part, so it works but just only the picture will not expand enough?

Hope to hear