WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Remove extra white space in the header (17 posts)

  1. skeeboston
    Member
    Posted 1 year ago #

    I'm trying to figure out how to modify my theme to remove the white space at the top of the website.

    I'm new with wordpress and I am using the blogolife theme. I tried modifying margins on about 10 different things but nothing is working. HELP!

    skeeboston.com

  2. TJ
    Member
    Posted 1 year ago #

    This is often related to the wordpress admin bar. Throw this at the top of your functions.php (inside the <?php ?> tags) and it should sort your problem:

    // Fix 28px Admin Bar problem
    function hide_wp_admin_bar(){ return false; }
    add_filter( 'show_admin_bar' , 'hide_wp_admin_bar');
  3. TJ
    Member
    Posted 1 year ago #

    Though it just means you can no longer log in from the front end of your site. Never a problem for me, but if this is necessary, you may need to dig a bit deeper!

  4. skeeboston
    Member
    Posted 1 year ago #

    I input the fix and it hid the admin toolbar which I don't mind, but it didn't fix the white space gap.

    Just to be clear, I am referring the the gap where the title and site description would go if I entered them into the theme.

    TJ, do you have any other ideas?

  5. TJ
    Member
    Posted 1 year ago #

    Ah right, misunderstood.

    If you open up the site in a browser with a good tag inspector (i.e. Chrome), you can right click in that section and click "inspect element". This will reveal the elements that are causing the issue - within the header element 'branding'. One child element has a min-height property that is causing a fair bit of the space. If you don't want to remove them from your header.php (editing the theme files), the following css will fix it:

    #branding hgroup, .header-desc { display: none !important; } /* hide empty elements */
    .social-icons { margin-top: 12px; } /* give icons top space */
  6. skeeboston
    Member
    Posted 1 year ago #

    It didn't do the trick. When I right click go to inspect element, it mentions "branding" and 900x122. Not sure where that number is located or if I can modify it, but that could be the trick?

    You mentioned a child element and a min height, so i'm looking that now.

    Thank you for the help... this is very frustrating.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    See your style.css file - line 74 and add the "display: none !important;" line to it:

    .header-desc {
        display: none !important;
        margin: 25px 20px 10px 0;
        min-height: 60px;
        width: 468px;
    }
  8. skeeboston
    Member
    Posted 1 year ago #

    Added that line, but it didn't help. I left it in there.

    I see something about <header id="branding">?

    I need a guru!

  9. TJ
    Member
    Posted 1 year ago #

    The header element's size is determined by the child elements. Removing them from the visual flow with the css display:none will vertically collapse the header element as no height is defined for this. I can see that the size of this header has decreased due to the addition of part of the code I suggested to your main style.css file (thanks WPyogi for the extra instruction) but I can't see the rest in there? Did you remove it?

  10. skeeboston
    Member
    Posted 1 year ago #

    I'm not sure what the child elements are? Can you be more specific? I am willing to try anything at this point!

  11. TJ
    Member
    Posted 1 year ago #

    Alrighty. In your style.css file (where WPyogi sent you) change the following:

    Starting on line 70, from this:

    #branding hgroup {
    margin: 20px 0 20px 15px;
    width: 450px;
    }

    to this:

    #branding hgroup {
    display: none !important;
    margin: 20px 0 20px 15px;
    width: 450px;
    }

    ...And to keep some space around the share icons, starting on line 87, from this:

    .social-icons img {
    margin: 0px 20px 0 0;
    }

    to this:

    .social-icons img {
    margin: 15px 20px 0 0;
    }

    These changes will shrink the top white area (where the share icons are) down to just enough space to comfortably contain the icons. Or are you trying to remove everything above the black nav bar?

  12. skeeboston
    Member
    Posted 1 year ago #

    I want to shrink the extra white space down and only show the media icons on the top right.

    Trying it now.

  13. skeeboston
    Member
    Posted 1 year ago #

    No Change... do I need to modify these?

    #page {
    border: 1px solid #c5d1d9;
    margin: 20px auto 0 auto;
    width: 960px;
    background: #ffffff; /* Old browsers */
    }
    #branding {
    background: #ffffff url(images/sky.png) top left repeat-x;
    margin-bottom: 5px;
    }

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The changes HAVE worked -- try clearing your browser cache.

    No need to change anything else.

  15. TJ
    Member
    Posted 1 year ago #

    Remember every time you make changes to a site that your browser will load its saved (cached) version to speed things up, unless you instruct it otherwise. To see a live version instead of the old saved one, hold the control key while clicking refresh, or hit CTRL + F5.

  16. skeeboston
    Member
    Posted 1 year ago #

    You guys are awesome!

    The sad part is I think I probably made a similar change, but didn't refresh the page right to view it.

    I learned a lot though, thank you very much for the help.

  17. TJ
    Member
    Posted 1 year ago #

    No worries!

Topic Closed

This topic has been closed to new replies.

About this Topic