XF 1.2 Problem with my Logo Resizing/Search Bar

[51463]

Somehow while i was customizing my header and page background or something...

Well know my header is acting funny.

My header is on the Left and on the Right is an advertising Banner.

When i shrink my browser the search bar goes over the avatar and users cannot see it.

When it goes even smaller the search bar looks a little like its over the border.

I have added 5 pictures in sequence to show my problem. You can see the problem on pictures 3 & 4

Can someone help me?

 

[Paul B]

You will need to implement media queries based on the browser width.

http://xenforo.com/community/resources/responsive-design.2193/

http://xenforo.com/community/resources/responsive-adsense.2084/

 

[51463]

I can't get this to work!!

I've tried many things but the logo always goes down too far. If i get rid of the adsense advertising it works fine. But everytime i put an ad to the right of the logo. It wont work.

And i really want to put an add to the right of the logo. Why is it so complicated

Is there any way we can get rid of the responsive design just for the header part?

I don't know what to do.

 

[51463]

Anything i do. The logo keeps forcing itself down on top of things. Is there a code somewhere where i can push it up? Or make some kind of wall to keep it from going down.

 

[51463]

I also tired to use this

<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
<img style="vertical-align: middle" src="../path/to/image.png" />
</div>


But it also pushes the logo down

And as you can see the Post New Thread becomes hidden and then no one will be able to post a new thread.

 

[51463]

I give up!! Is there anyone who we can pay to do this for us.

 

[Russ]

You can try this:

http://xenforo.com/community/thread...er-logo-and-another-banner.61870/#post-656790

Adjust the height of course, it'll look a bit awkward though if the user has ad-block on their mobile device.

 

[51463]

I'm not sure what i did. But it's working a bit..

ad_header


<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
add script here
</div>



extra.css

<xen:if is="@enableResponsive">

@media (max-widthmaxResponsiveWideWidth)
{
#headerMover #headerProxy { height: 274px; }
}
</xen:if>



Customized Components

For some reason I had to reset "Height of Header Logo" and re-enter it again. And the add goes behind the logo when it shirks. But the logo doesnt go down anymore

Its good enough that i'm happy with it.

Thank you Russ!!