Centring the Title and Menu on homepage

• 

  imveryape · Member · Jun 24, 2013 at 4:04 am

  • Copy link
  • Add topic to favorites

  When I alter the size of my title, I notice it doesn’t centre perfectly with the menu. Is there a way to fix that? Also, on my post pages, the bordering on the menu goes into the bordering. Is there any way to shorten the bordering, or remove it?

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

• 

  jeffwelston · Member · Jun 24, 2013 at 5:04 am

  • Copy link

  It looks like when the CSS of the theme was customized, an adjustment was made to the navigation menu (possibly additional padding).

  This pushed the menu ‘box’ wider than originally intended. It is forced out to the right and now overlays the background about 20px (pixels).

• 

  jeffwelston · Member · Jun 24, 2013 at 5:08 am

  • Copy link

  Yeah, try removing the left and right padding on the <div> with the id-=’menu’

• 

  jeffwelston · Member · Jun 24, 2013 at 5:09 am

  • Copy link

  id=”menu”, not sure where the hyphen came from

• 

  justpi · Member · Jun 24, 2013 at 1:33 pm

  • Copy link

  @imveryape: This has nothing to do with increasing the font size of the title, it just becomes noticeable when the title is very long. And it’s not your fault, it’s an oversight in the design of the theme.
  You’ve added this:

  #menu {
      text-align: center;
  }

  Turn it to this:

  #menu {
      padding: 10px 0;
      text-align: center;
  }

• 

  imveryape · Member · Jun 24, 2013 at 4:50 pm

  • Copy link

  Thanks @justpi, that did the trick. One more question, do you have any idea why on my homepage, when I reduce the size of my site title, it doesn’t end up centering with the menu?

• 

  imveryape · Member · Jun 24, 2013 at 4:51 pm

  • Copy link

  Or did the code you gave me fix that?

• 

  justpi · Member · Jun 24, 2013 at 5:29 pm

  • Copy link

  You’re welcome.
  Your blog title is exactly centered now, and it remains so if I reduce its font-size in Firebug. Try reducing it again, so we can see what’s happening.

• 

  imveryape · Member · Jun 24, 2013 at 6:58 pm

  • Copy link

  Hi @justpi, I have reduced it to 180% (from 218%), and it is just slightly to the right. I am just being a perfectionist, and there probably isn’t a way to fix it.

  Thanks so much for your time.

• 

  imveryape · Member · Jun 24, 2013 at 7:48 pm

  • Copy link

  And maybe it is centered, I am just referring to its alignment with the menu. Am I just going crazy? Can you see it too?

• 

  justpi · Member · Jun 25, 2013 at 11:04 am

  • Copy link

  Ah yes, it’s 5-6 pixels to the right. There’s no padding or margin anywhere that would justify this. The link box is exactly centered but the letters inside it are a bit off, so I guess it’s because of the particular font family. You can add a right margin to balance it:

  #site-title {
      margin: 0 3px 0 0;
  }