How to move the header and content of wordpress site down

8 replies
Hi,

I have installed Wordpress on my site and am now trying to match the layout to look like the other part of my site, i.e. the background, top menu and footer.

This is where I've got to:

Marriage Rescue Central | Just another WordPress site

By seeing the main page of the site you'll see I need to move the blog content down and then insert a menu at the top so it looks like the top of my other pages.

How do I re-position the blog to move down so I can go about adding a menu?

Also, any advice on the best way to add my own menu so it looks like the menu on the rest of my site?

Thanks
Robert
#content #header #move #site #wordpress
  • Profile picture of the author ltrain_riders
    Since you are using the TwentyEleven theme you already have a menu in place. If you want to get the menu above your logo then you need to modify your header.php file and move the <nav> </nav> tag so it is before <div id="page" class="hfeed">. Then you can use CSS to adjust any styling and padding.
    {{ DiscussionBoard.errors[7501882].message }}
  • Profile picture of the author ltrain_riders
    Also changing style.css ~line 75 to the following should help adjust your header

    #page {
    margin: 75px auto 2em auto;
    max-width: 1000px;
    padding: 10px 10px 0 10px;
    width: 970px;
    }
    {{ DiscussionBoard.errors[7501923].message }}
    • Profile picture of the author Robert Mangan
      Thanks for your advice.

      I've removed the menu in the header of my blog - as I don't want to display the blog's menu in the blog's font etc.

      What I am trying to do is move the overall position of the blog down a little so that more of the background image is seen above at the top. Then, somehow, I will incorporate the menu I'm using in the rest of my site at the top of the blog.

      Once I get this accomplished I just need to incorporate the footer from my main site into my blog and I'll have a nicely integrated blog that matches perfectly in with the rest of my site.

      Sounds easy but to a complete non-techy WP appears to be a complete mystery.

      Robert
      Signature

      Want Solo Ads with Maximum Price of JUST 0.38 Cents/Click?
      Want Solo Ads with Minimum Optin Rate of 30%?
      Want to Learn How to Build a List FAST and Make $3000/Month Selling Solo Ads?
      $27 Lifetime Membership == > TheSoloAcademy.com - That's What My Members Are Getting!

      {{ DiscussionBoard.errors[7503628].message }}
  • Profile picture of the author ltrain_riders
    If you apply the code I posted in post #3, this will achieve what you are looking for. You should also leave the menu code in there so you can use that to create WordPress menu to match your main site. Just move it as I suggested in post #2.
    {{ DiscussionBoard.errors[7504464].message }}
    • Profile picture of the author Robert Mangan
      ltrain_riders,

      your advice helped tremendously, thank you.

      However I still have a problem in that I can't seem to center my WP page.

      I have this piece of code in my style.css

      #page {
      margin: 75px 2em auto;
      max-width: 1000px;
      padding: 10px 10px 0 10px;
      position:absolute;
      left:10%;
      }

      When I set left to 50% it doesn't center it either?

      Also, I placed the menu at the very top of each page template for the site. I found placing a menu inside the page meant that the menu didn't have any background. With the menu placed outside of the WP page, the menu gets the bg image.

      And, I will also need a way to figure out how to center the menu. Here's the code in the css for the menu parts:

      .menuContainer
      {
      max-width: 1000px;
      padding: 10px 10px 0 10px;
      margin-left:200px;
      }


      .topNaviagationLink
      {
      text-align:center;
      position:relative;
      margin-top:30px;
      font-size:22px;
      margin-left:-10px;
      width:121px;
      height: 35px;
      line-height: 35px;
      float:left;
      color:#CEEAEE;
      font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
      }


      .topNaviagationLink a
      {
      text-decoration:none;
      color:#CDE2FC;
      }

      .topNaviagationLink a:hover
      {
      text-align:center;
      border-bottom:none;
      color:#000000;
      display: block;
      width:121px;
      height: 35px;
      line-height: 35px;
      background-image:url(http://www.marriagerescuecentral.com/images/tab.png);
      }


      I would appreciate your help on this if you have time - or anyone else's if they're reading this.

      Thanks again,

      Robert
      Signature

      Want Solo Ads with Maximum Price of JUST 0.38 Cents/Click?
      Want Solo Ads with Minimum Optin Rate of 30%?
      Want to Learn How to Build a List FAST and Make $3000/Month Selling Solo Ads?
      $27 Lifetime Membership == > TheSoloAcademy.com - That's What My Members Are Getting!

      {{ DiscussionBoard.errors[7509005].message }}
      • Profile picture of the author Robert Mangan
        anyone able to help me out with this?
        Signature

        Want Solo Ads with Maximum Price of JUST 0.38 Cents/Click?
        Want Solo Ads with Minimum Optin Rate of 30%?
        Want to Learn How to Build a List FAST and Make $3000/Month Selling Solo Ads?
        $27 Lifetime Membership == > TheSoloAcademy.com - That's What My Members Are Getting!

        {{ DiscussionBoard.errors[7509488].message }}
        • Profile picture of the author Robert Mangan
          ok, after more googling i think I've fixed the problem.

          I now have this defined in my css for the #page element:

          #page {
          margin: 75px 2em auto;
          width: 1000px;
          padding: 10px 10px 0 10px;
          position:absolute;
          left:50%;
          margin-left:-500px;
          }

          that seem to do the trick
          Signature

          Want Solo Ads with Maximum Price of JUST 0.38 Cents/Click?
          Want Solo Ads with Minimum Optin Rate of 30%?
          Want to Learn How to Build a List FAST and Make $3000/Month Selling Solo Ads?
          $27 Lifetime Membership == > TheSoloAcademy.com - That's What My Members Are Getting!

          {{ DiscussionBoard.errors[7509544].message }}
  • Profile picture of the author ltrain_riders
    Sorry I was out of town.

    You might want to remove the border on top of your logo by deleting
    border-top: 2px solid #BBB;
    inside style.css under

    #branding {
    ...
    }
    {{ DiscussionBoard.errors[7524418].message }}

Trending Topics