Announcement

Collapse
No announcement yet.

site-logo header-edit-box white space

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

  • site-logo header-edit-box white space

    Hi,

    There is too much white space between my site logo and the menu bar, what code would I use in the additional.css file to reduce this?

    I did try this:
    #header.site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}

    but didnt seem to do anything!

  • #2
    The header has a minimum height of 104 pixels specified as well. You can change this with the header_height style variable in the AdminCP.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      where can I find the header_height style variable in the AdminCP, it didn't come up when I searched in templates?

      cheers

      Comment


      • #4
        Originally posted by andyleighton View Post
        where can I find the header_height style variable in the AdminCP, it didn't come up when I searched in templates?

        cheers
        You can find it in the Style Manager under Edit Stylevars in the Drop-Down Menu for each style.

        Or you can use CSS.

        #header {
        height: 104px !important;
        }

        Comment


        • #5
          mmmm neither of those two suggestions altered the height of the header,( increase or decrease) maybe its the padding in green I need to reduce the height of?

          Click image for larger version

Name:	Capture.JPG
Views:	108
Size:	17.9 KB
ID:	4435538

          Comment


          • #6
            The logo itself has no margin or padding by default. You may achieve the desired results by adjusting the header cell.

            #header .header-cell {
            margin: 0;
            padding: 0;
            }

            You will obviously not want the values to be zero. Adjust them as necessary.

            Comment


            • #7
              Thanks Omnibus, but that didnt change anything either unfortunately

              By using Chrome 'inspect' I managed to change the padding px in site-logo header-edit-box, and it worked perfectly ...

              but when I put the same altered code from Chrome 'inspect' into css_additional.css the default padding stays the same.

              #header .site-logo {
              padding: 22px 10px 10px 10px;
              background: transparent;
              position: relative;
              text-align: left;


              Click image for larger version

Name:	Capture.JPG
Views:	63
Size:	42.3 KB
ID:	4435564


              Any ideas why the same Chrome 'inspect' code that changes the site-logo padding doesnt work in css_additional.css? (could be why the previous suggestions didnt work either)


              Attached Files

              Comment


              • #8
                I'm just speculating here but most browsers have a default CSS of their own which is why CSS resets were created. I don't use Chrome regularly but I think Wayne Luke does so he could probably answer that question for you.

                Comment


                • #9
                  CSS is very very specific.. It is completely designed around specificity. What is the exact CSS that you're applying to the element?

                  For example the code in the first post is incorrect. There is no element in the system with both the #header ID and the .site-logo class. One is actually the child of the other. So this is broken:

                  Code:
                  #header.site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}
                  Instead, you need to find the element with the #header ID and then the child of that element with the .site-logo class. That code would look like this:

                  Code:
                  #header .site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}
                  Note the space between the #header and .site-logo. That space is very important in the scheme of things.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API

                  Comment


                  • #10
                    Still cant get it to do anything, hard to believe its so difficult to adjust the green padding under the logo image.

                    this is the code I tried from 'Chrome Insert' in css_additional.css: ( the 8px is the new adjustment)

                    #header .site-logo {
                    padding: 22px 10px 8px 10px;
                    }



                    Any final code possibilities to reduce the green padding between the logo and menubar?

                    Cheers!


                    Comment


                    • #11
                      Originally posted by andyleighton View Post
                      Still cant get it to do anything, hard to believe its so difficult to adjust the green padding under the logo image.

                      this is the code I tried from 'Chrome Insert' in css_additional.css: ( the 8px is the new adjustment)

                      #header .site-logo {
                      padding: 22px 10px 8px 10px;
                      }



                      Any final code possibilities to reduce the green padding between the logo and menubar?

                      Cheers!

                      Are you positive the image itself doesn't have transparent white space? I'm asking this because I just tested a header logo image with 0 padding and it has no padding on the bottom between it and the navigation toolbar.

                      Comment


                      • #12
                        Unfortunately, your cropped image shows nothing that would help us solve your problem. What is the computed CSS for the logo and what is the computed CSS for the header element?

                        Heck, even a link to the site with the problem would help. Probably the most useful.

                        This code works for me:
                        Code:
                        #header .site-logo {
                            padding: 22px 10px 8px 10px;
                            background: transparent;
                            position: relative;
                            text-align: left;
                        }
                        All I can guess is that some other CSS in your site is overriding this change.
                        Last edited by Wayne Luke; Thu 27 Feb '20, 9:09am.
                        Translations provided by Google.

                        Wayne Luke
                        The Rabid Badger - a vBulletin Cloud demonstration site.
                        vBulletin 5 API

                        Comment


                        • #13
                          All I can guess is that some other CSS in your site is overriding this change.
                          I think you might be right if the code I tried works for you
                          Site is https://tokyoposts.com

                          (just as a side query, while looking for other css thats overriding the new code , I see there is various css code in the additional.css of the different themes, I didnt put it in there, I guess that is a default for some themes?)

                          Comment


                          • #14
                            Your default CSS is this:

                            div.site-logo.header-edit-box {
                            padding: 22px 10px 26px 10px;
                            }

                            It is the 26px bottom-padding that is causing the issue.

                            You can adjust that number to any value using either the full CSS above or

                            div.site-logo.header-edit-box {
                            padding-bottom: 26px;
                            }

                            You may or may not have to use !important to override the default CSS. I didn't in my testing.

                            If you do, then use

                            div.site-logo.header-edit-box {
                            padding-bottom: 26px !important;
                            }

                            Comment


                            • #15
                              Brilliant! thanks Omnibus, that works great with the !important added

                              Much appreciated! and thanks also Wayne for your help over the last week,

                              cheers

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X