MyBB Community Forums

Full Version: Big Theme Bug
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Check out HaloGear.net.

Zoom in, till the logo becomes distorted and half way through the screen. How do I fix that, I don't want it to stay in the center, if we zoom in, I would like the image to stay fixed.

Help?

iPhone access will be distorted immensely.
Can you post a screenshot? It seems alright for me.
You can't exactly fix that. When you're zooming in you should know it's not gonna look right.

What's happening is that the logo is collapsing with the menu, and therefore it's forced to go down. This all depends on your monitor's width, so if you had a bigger one, it would probably need more zooming for the logo to go down.

What you could do is make the logo smaller and remove a few menu items. But that will only take longer before the logo goes center. Toungue
Faviouz, but this doesn't happen with other forums, the logo doesn't go down.
I see the problem your having, try creating the logo in another format and different size.
The other forums don't have a similiar layout.

I've been playing with the CSS on Firebug, and it's not possible to fix this and keep the same header. The way it's designed, the logo is forced to go down when it collapses with the menu. See the code above, from your theme.

.header_right {
        background: url(../../../images/halog/header_right.png) top left no-repeat;
        height: 106px;
        width: 530px;
        padding-top: 40px;
        padding-right: 20px;
        float: right;
}

.header_in {
        margin: auto auto;
}

.header_right (the menu) has a fixed width of 530px, so when you're zooming, the logo becomes bigger and so does the menu. And when they can no longer stay in the same line, the logo goes down.
With this CSS your image will stay at least in the header area.
However, if someone is zooming in, your image will be hidden Wink

.header_in div.logo
{
  overflow:hidden;
}
Not sure if he wants it to be hidden. But anyway, I somehow found a weird little hack which seems to do the trick.

Find:
.header_in {
	margin: auto auto;
}

Replace with:
.header_in {
	margin: auto auto;
	float: left;
	width: 0px;
}

Tried it on Firebug and it works. However I'd recommend you to get another theme, that one is very messy.