Announcement

Collapse
No announcement yet.

How to add a full-width logo in the header

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    Blackhorse, did you change the right to left?

    Code:
    #header .toolbar {
        position: absolute;
        right: 0; [COLOR=#FF0000]/* Change right to left for RTL */[/COLOR]
        bottom: -30px;
        padding: 0;
        width: auto;
    }
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #17
      Hello Glenn,

      yes i did, as i faced a problem with search button and guessed that i had to change right to left, and it worked well except for some area not included in the banner as shown in the screenshot. Now once i get a code from you, i change right to left and left to right then test it.

      Comment


        #18
        This is the exact code i have now

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

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

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

        #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;
        left: 0;
        bottom: -30px;
        padding: 0;
        width: auto;
        }
        @media only screen and (max-width: 440px) {
        #header .site-logo.header-edit-box {
        padding: 0;
        }
        }

        ====

        I increased pixels to 4500 in width to allow it to fit if screen browser is 120 %

        Comment


        • danielmorashov
          danielmorashov commented
          Editing a comment
          thanks it works for RTL

        #19
        I also changed this
        #header .site-logo img { max-width: 304px; } to
        #header .site-logo img { max-width: 320px; } but i am not sure if true as i didn't find any change !

        Comment


          #20
          hello glennrocksvb

          i'm verry happy with this code.

          But the full-width logo looks verry fine on the desktop but it's not responsive, it's not correctly aligned as you can see on this screenshot.


          wat should i do to make it responsive ?

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Please post or PM a link to your site.

          #21
          Here it is glennrocksvb :

          Comment


            #22
            Merenguista, try this:

            Code:
            .l-small #header {
                min-height: 0;
                margin-top: 0;
            }
            .l-small #header .site-logo {
                margin-top: 0px !important;
                margin-left: 0;
                max-width: none !important;
            }
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


            • Merenguista
              Merenguista commented
              Editing a comment
              I put it below the code in the css_additional template ???

            • glennrocksvb
              glennrocksvb commented
              Editing a comment
              That's correct

            #23
            Now it's Ok it looks just fine. Thank you glennrocksvb you are an excellent coder.

            Comment


              #24
              Glad to help!
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


              #25
              Hello Glenn,
              Very silly question. With this your code where is locate of a image logo I have to upload to?
              Thank you so much

              Comment


                #26
                The same way as you normally would. You just have to upload a wide logo that spans the width of the header.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                • hoangzu
                  hoangzu commented
                  Editing a comment
                  Thank you so much Glenn. I'll try to see if I can make it.
                  Have a good Monday.

                #27
                I'm using this code but the logo isnt 1200px, can i still using it and have the logo centered on the header? I looked in the code but could see where to place it center.

                site is here.

                Comment


                • NumNum
                  NumNum commented
                  Editing a comment
                  I'm all set.

                #28
                I tried making the header background transparent so the page background is seamless up to the logo image, but I am missing something as I can see the seam between the page and header background where the background image doesn't line up.

                What am I doing wrong?

                Comment


                  #29
                  Code:
                  #header {
                      background: transparent;
                  }
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #30
                    Or better, remove the background image value in the header_background stylevar.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment

                    Users Viewing This Page

                    Collapse

                    There is 1 user viewing this forum topic.

                    • Guest Guest

                    Latest Posts

                    Collapse

                    Working...
                    X
                    Searching...Please wait.
                    An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                    Please push the back button and reload the previous window.'
                    An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                    Please push the back button and reload the previous window.'
                    An internal error has occurred and the module cannot be displayed.
                    There are no results that meet this criteria.
                    Search Result for "|||"