Announcement

Collapse
No announcement yet.

header is not responsive

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • header is not responsive

    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. Click image for larger version

Name:	head.JPG
Views:	21
Size:	84.1 KB
ID:	4356008Click image for larger version

Name:	head2.JPG
Views:	16
Size:	93.8 KB
ID:	4356009
    Attached Files

  • #2
    This is because you have customised it in some way.

    Revert your header template and it should work.
    MARK.B | vBULLETIN SUPPORT

    TalkNewsUK - My vBulletin 5.5.2 Demo
    AdminAmmo - My Cloud Demo

    Comment


    • #3
      Originally posted by Mark.B View Post
      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 ?

      Comment


      • #4
        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, Joe D. , has it done like this on his Cloud demo site:
        https://sedona.vbulletin.net/
        MARK.B | vBULLETIN SUPPORT

        TalkNewsUK - My vBulletin 5.5.2 Demo
        AdminAmmo - My Cloud Demo

        Comment


        • #5
          this is my header code . could you please modify it for me?
          Attached Files

          Comment


          • #6
            Revert your header and specify the full width image in the header_background stylevar. Set your logo image to /core/clear.gif
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            I am not currently available for vB Messenger Chats.

            Comment


            • #7
              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-...-in-the-header


              GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

              Comment


              • #8
                The second method isn't officially supported.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


                • Glenn Vergara
                  Glenn Vergara commented
                  Editing a comment
                  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
                  Wayne Luke commented
                  Editing a comment
                  That is correct. Just clarifying.

                • Glenn Vergara
                  Glenn Vergara commented
                  Editing a comment
                  Does it mean that if custom css is provided by Support, it is supported?

              • #9
                Originally posted by Wayne Luke View Post
                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..

                Comment


                • raya7een91
                  raya7een91 commented
                  Editing a comment
                  yes . I copy the code and I paste it in css_additional but nothing change.

                • Glenn Vergara
                  Glenn Vergara commented
                  Editing a comment
                  Is the logo image width as wide as the header? Could you.post or PM the url of your site?

                • Glenn Vergara
                  Glenn Vergara commented
                  Editing a comment
                  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.

              • #10
                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.

                Click image for larger version

Name:	snip_20161013105212.png
Views:	15
Size:	105.7 KB
ID:	4356136
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


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

                  Comment


                  • #12
                    Originally posted by Wayne Luke View Post
                    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.

                    Click image for larger version

Name:	snip_20161013105212.png
Views:	15
Size:	105.7 KB
ID:	4356136
                    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.

                    Comment


                    • #13
                      When used as a background, the image will conform to the space available.
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                      vBulletin 5 Documentation - Updated every Friday. Report issues here.
                      vBulletin 5 API - Full / Mobile
                      I am not currently available for vB Messenger Chats.

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X