Need help? Check out our Support site, then


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

  1. 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.

  2. Try this:

    #header {
    padding: 0;
    }

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

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

  5. 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.

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

    div.menu {
    	font-size: 13px;
    	margin-left: 12px;
    	width: 928px;
    margin: 20px;
    }
  7. 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!

  8. 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;
    }
  9. 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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic