Positioning post/page content below the menu (Automatic theme)

• 

  sdombek · Member · Apr 17, 2013 at 1:18 am

  • Copy link
  • Add topic to favorites

  I’m trying to position my post/page content below my menu. Right now I’m using a top margin to position the content on the homepage but it’s not consistent especially on mobile browsers. It’s displaying even worse on the subpages with lots of overlap between the menu and the content–take a look at The Project page for a good example.

  I’ve managed to make a lot of CSS changes through trial and error but this one has me stumped. Thanks for any advice.

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

• 

  justpi · Member · Apr 17, 2013 at 2:21 am

  • Copy link

  The problem, as you’re probably aware of, is due to your absolutely positioned nav menu. And the static pages look wrong because you tried to correct the problem by adding a top margin to the sticky post instead of the main content area in general.
  So, remove this:

  .post-241 {
      margin-top: 6em;
  }

  And either increase the bottom margin of #masthead or add this (change the value to adjust the space):

  #content {
      margin-top: 99px;
  }

  What happens on mobile devices has to be taken care of separately, I think, but I have no experience with this.

  (By the way, I’ll never understand why users reposition the menu instead of selecting a theme that displays the menu where they want it.)

• 

  sdombek · Member · Apr 17, 2013 at 2:42 am

  • Copy link

  Thanks, that solved the main problem.

  Does anyone have any tips for getting the display proportions correct on mobile devices? On an iPad the page content is pushed right up against the menu with barely any spacing at all.