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

• 

  therealroryo · Member · Nov 16, 2012 at 8:59 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  duto · Member · Nov 18, 2012 at 5:35 pm

  • Copy link

  Try this:

  #header {
  padding: 0;
  }

• 

  duto · Member · Nov 18, 2012 at 5:39 pm

  • Copy link

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

• 

  therealroryo · Member · Nov 19, 2012 at 3:37 pm

  • Copy link

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

• 

  houstonweaver · Member · Nov 19, 2012 at 7:02 pm

  • Copy link

  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.

• 

  houstonweaver · Member · Nov 19, 2012 at 7:18 pm

  • Copy link

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

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

• 

  therealroryo · Member · Nov 20, 2012 at 2:11 pm

  • Copy link

  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!

• 

  designsimply · Member · Dec 11, 2012 at 1:17 am

  • Copy link

  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;
  }

• 

  designsimply · Member · Dec 11, 2012 at 3:40 am

  • Copy link

  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;
  }