White space between header and menu

• 

  buddhachicandbuttercream · Member · Nov 23, 2013 at 7:59 am

  • Copy link
  • Add topic to favorites

  What CSS would I use to eliminate the huge white space between my header and menu items and shift everything up?

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Nov 23, 2013 at 9:22 am

  • Copy link

  First, you have created that space yourself (by using absolute positioning).
  Second, you shouldn’t do this, because the theme is responsive: it shrinks to adapt to lower screen resolutions and mobile devices. When this happens, the header image becomes smaller, so the positioning of the menu will be all wrong. Drag the browser window to make it narrower and see for yourself.

• 

  justpi · Member · Nov 23, 2013 at 9:34 am

  • Copy link

  If you want the menu below the header image, the reasonable thing to do would be to use a theme that’s designed that way. If you insist on repositioning the menu on the theme you’re using, use a percentage instead of the px value.

• 

  buddhachicandbuttercream · Member · Nov 23, 2013 at 1:12 pm

  • Copy link

  Thanks justpi. I was provided with the CSS to create that space awhile back and I cannot recall what my issue was at that time. When you say “percentage” what would I use for that? Appreciate your help.

• 

  justpi · Member · Nov 23, 2013 at 4:59 pm

  • Copy link

  You’re welcome.

  You’ve added this:

  .main-navigation {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: -30px;
  position: absolute;
  top: 250px;
  width: 100%;
  }

  and this:

  .main-navigation {
  position: absolute;
  top: 500px;
  }

  Remove the second one, as it conflicts with the first, and turn the first one to this:

  .main-navigation {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 85%;
  width: 100%;
  }

  Change the 85 to adjust the space.

• 

  buddhachicandbuttercream · Member · Nov 24, 2013 at 11:24 pm

  • Copy link

  Excellent, thank you for your help! That worked perfectly.