Eliminating the gap between the header and the top of the page

  • Author
    Posts
  • #1072694

    therealroryo
    Member

    Hi everyone!

    So, I “Fixed” my header, menu and search bar to the top of the page so that they don’t move when you scroll down. However, now there is this gap at the top of the page, so when you scroll you end up seeing the stuff again.

    What I would like to do is get rid of that gap, which would theoretically move the header up. But I’m not sure how to do it.

    Any help would be appreciated, thanks!

    The blog I need help with is therealroryo.com.

    #1072866

    duto
    Member

    Try this:

    #header {
    padding: 0;
    }

    #1072867

    duto
    Member

    or/and:
    #wrapper {
    margin-top: 0;
    }

    #1072877

    therealroryo
    Member

    Thanks Duto! I had to use them both to get rid of the gap. Much appreciated!

    #1072900

    you got rid of the gap, but on my screen, your menu has now moved up so that it isn’t entirely on the black bar.

    #1072902

    if that is happening on your screen too, try this edit:

    div.menu {
    	font-size: 13px;
    	margin-left: 12px;
    	width: 928px;
    margin: 20px;
    }
    #1072919

    therealroryo
    Member

    Thanks Houstonweaver. It’s not happening on my screen here at work, but last night I was on Safari on my mac and I noticed that the menu is BELOW the header! For now I’m going to get rid of the Fixed property, but I don’t know if that’ll affect the postion of the menu. This is so tedious!

    #1072948

    Give this a try. Note that I only tested it on the home page. Make sure to add it to the bottom of your already-added custom CSS on the Appearance → Custom Design → CSS page:

    body {
    	border-top: 1px solid #fafafa;
    }
    #navigation {
    	position: fixed;
    }
    #navigation-frill {
    	position: fixed;
    	top: 40px;
    	z-index: 9;
    }
    .logged-in #navigation-frill {
        top: 70px;
    }
    #wrapper {
    	margin-top: 63px;
    }
    #1072949

    Since you’re using a photo for the background (which I think looks totally awesome btw), you might want to do something to the footer widgets to make them easier to read. Here’s a little CSS you can experiment with:

    #widgets {
    	background: rgba(0,0,0,0.7);
    	padding-left: 1em;
    	padding-right: 1em;
    	color: #eee;
    }
    
    #widgets .widget-title {
    	color: #fff;
    	text-shadow: 0 1px 0 #000;
    }
    
    #widgets.three .widget-area {
    	width: 200px;
    }

The topic ‘Eliminating the gap between the header and the top of the page’ is closed to new replies.