header is not responsive

[raya7een91]

Hello every body

I have a problem , the header of my forum is not responsive with different screen size . how I make it fit with all screens size . It appears as a catted image.

I attached the header in different screens.

[Mark.B]

This is because you have customised it in some way.

Revert your header template and it should work.

[raya7een91]

This is because you have customised it in some way.

Revert your header template and it should work.

yes,I customized it to delete the logo of the vbulletin . I don't want a logo I want full header image. what should I do ?

[Mark.B]

You can have a full header image and still have the header responsive, but the issue is that you lose control over where the logo is displayed and you can end up with it being partially or completely cut off the page.

You are better off using css to show a background *image*, but still having the logo as an actual logo, rather than embedded within the background.

One of our support staff, BirdOPrey5 , has it done like this on his Cloud demo site:

https://sedona.vbulletin.net/

[raya7een91]

this is my header code . could you please modify it for me?

[Wayne Luke]

Revert your header and specify the full width image in the header_background stylevar. Set your logo image to /core/clear.gif

[glennrocksvb]

You can still have a full-width logo (not as a background image) using the existing <img> tag.

See my solution here:

http://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-5-template-only-modifications/1629-how-to-add-a-full-width-logo-in-the-header

[Wayne Luke]

The second method isn't officially supported.

[glennrocksvb]

All custom css in css_additional is not supported, right? You have a warning in Sitebuilder CSS Editor that says:

WARNING: Any changes made to the CSS here will not be supported by the vBulletin support team.

[Wayne Luke]

That is correct. Just clarifying.

[glennrocksvb]

Does it mean that if custom css is provided by Support, it is supported?

[raya7een91]

Revert your header and specify the full width image in the header_background stylevar. Set your logo image to /core/clear.gif

there is no style var related to the header background size . could you please teach more..

[raya7een91]

yes . I copy the code and I paste it in css_additional but nothing change.

[glennrocksvb]

Is the logo image width as wide as the header? Could you.post or PM the url of your site?

[glennrocksvb]

It looks like you modified the header template to remove the HTML markup for the logo. That's why my solution will not work which is intended to make a banner logo (not background). If you revert your changes to the header template and apply my solution, then it should work.

[Wayne Luke]

Styles -> Style Manager. Choose "Style Variable Editor" off the Choose Action menu for your Style.

Scroll down to the Header Style Variable group. Should be the first one.

[raya7een91]

my site url is : http://forum.gutech.edu.om/

[raya7een91]

Styles -> Style Manager. Choose "Style Variable Editor" off the Choose Action menu for your Style.

Scroll down to the Header Style Variable group. Should be the first one.

what this can help me ? I need to make the responsive with different device not to change the header itself.


sorry for late of replay I was in leave.

[Wayne Luke]

When used as a background, the image will conform to the space available.