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

    Official - Free How to add a full-width logo in the header

    In some cases, you may want the logo to span the full-width of the header. Some suggest to put a background image in the #header element and then make the logo a transparent image. In my opinion, having a transparent logo is not good in itself not just for SEO. The logo is one of the most important images associated with a website, why would you put a transparent logo? If someone shares your site to Facebook or Twitter and if you don't have Open Graph tags on your site (which you should!), then one of the images that may be pulled from your site is your transparent logo! Well, enough of the ramblings, I think you're getting my point.

    Here's a solution that uses the existing logo and adds custom CSS to style the header with a full-width image.

    Note: Make sure the width of the banner logo matches the width of the header which is 1200px by default.

    Add the following CSS in css_additional or in Sitebuilder > Style > CSS Editor.

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

    #2
    Many thanks for this it is something i was not really looking for but decided to try on one of my test sites i have on my laptop end result it is now on my live site and is really looking good
    Click image for larger version

Name:	newban.png
Views:	1
Size:	275.4 KB
ID:	2730
    Wise men say nothing Fools never listen

    Comment


      #3
      Nice!

      Comment


        #4
        Ok maybe i done something stupid with the above code but hey whats life without a few risks so instead of putting the code into the styles additional.css i put it in the global.css simple reason i have over 20 styles on my live site and working another dozen or so on my test site on my laptop this saves a lot of hassle of copying and pasting into the various styles.
        Wise men say nothing Fools never listen

        Comment


          #5
          That's not recommended. Whenever you upgrade, you might have template merge conflicts you'd have to resolve.

          What you could do is to create a product xml that uses a template hook that contains those CSS. Hook location is header_head. Then when you install the xml, it would create the template hook in all the styles and themes.
          ​​​

          Comment


            #6
            thank you

            Comment


              #7
              Thanks! Had moved the Search box as well.

              Cheers!

              G

              Comment


                #8
                Does this code still work in V5?


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

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

                #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;
                right: 0;
                bottom: -30px;
                padding: 0;
                width: auto;
                }

                @media only screen and (max-width: 440px) {
                #header .site-logo.header-edit-box {
                padding: 0;
                }
                }

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  The quick way to know is to try using it.

                #9
                I'm worried about where the brackets { are.

                @media only screen and (max-width: 320px) {
                #header .site-logo.header-edit-box {
                text-align: center;
                } --> only 1 bracket

                #header .site-logo img {
                max-width: 304px;
                }
                }
                --> 2 brackets

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  The last bracket } in the last line is for the opening bracket { in the first line. If you added [code] bbcode in your post you would see the indentation and it would be easier to read the code.

                #10
                Hey it worked. I took a chance on it and it rocks!!! I was also wondering... Is it possible to add a css drop shadow around main body? The main site has it and I'd like the VB area to match. If it's possible, can you tell me how to make it happen?

                Comment


                  #11
                  To organize the topics and not get mixed up here, please start a new one. And specify exactly which main body you are referring to.

                  Comment


                    #12
                    Originally posted by glennrocksvb View Post
                    That's not recommended. Whenever you upgrade, you might have template merge conflicts you'd have to resolve.

                    What you could do is to create a product xml that uses a template hook that contains those CSS. Hook location is header_head. Then when you install the xml, it would create the template hook in all the styles and themes.
                    ​​​
                    Ok finally got around to doing this as a product tested on all versions of vb from 5.2.6 to 5,4.1 and it works all credit goes to glenn as the link in the product leads back to this post

                    Attached Files
                    Wise men say nothing Fools never listen

                    Comment


                      #13
                      Thanks for sharing willie53.

                      One minor comment though. The <arguments> tag is not needed and should be be empty since you don't need to pass any variable that the template needs or uses.

                      Comment


                        #14
                        thank you

                        Comment


                          #15
                          Hello Sir,

                          I tried the code and it worked well but my forum is Arabic, and i changed the search to left, but still the header is not fully placed,

                          as you can see from the screenshot

                          how can i correct that please?

                          Click image for larger version

Name:	image.png
Views:	1
Size:	737.3 KB
ID:	11822

                          Comment

                          Working...
                          X