Center the main menu and also reduce menu padding.

• 

  ferrierawards · Member · Aug 20, 2015 at 7:46 pm

  • Copy link
  • Add topic to favorites

  Hi.

  I’m looking for some help with custom CCS using the Hemingway Rewritten theme.

  I have successfully managed to center the main navigation bar on my site using the css alteration below:

  .blog-menu {
      text-align: center;
  }
  
  .blog-menu > li {
      float: none;
      display: inline-block;
  }

  However I would also like to reduce the spacing between each of the individual menu items. I have tried adding the following however this extra rule seems to cancel out the existing “center” rule:

  .main-navigation a {
      padding: 10px;
  }

  I’m sure I have made a basic error but I’d be extremely grateful if someone could recommend a solution that would allow both rules to apply.

  Thanks
  Fred

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

• 

  darrellschulte · Member · Aug 20, 2015 at 10:24 pm

  • Copy link

  Hiya Fred,

  Too narrow?

  .menu-menu-1-container ul li a {
      padding-left: 5px;
      padding-right: 5px;
  }

• 

  ferrierawards · Member · Aug 21, 2015 at 1:10 pm

  • Copy link

  Hi

  Thanks for replying,

  Your command works in terms of the padding but it doesn’t seem to fix the issue of centering the menu items… They appear justified to the left of the menu bar which doesn’t look great on larger screens.

  Thanks
  Fred

• 

  darrellschulte · Member · Aug 21, 2015 at 1:35 pm

  • Copy link

  Here you go!

  .main-navigation ul {
      text-align: center;
  }
  
  .main-navigation li {
      display: inline-block;
      float: none;
  }

  One more thing, you will need to display the WordPress.com footer information. Hiding that attribution will put your site in violation of the Terms of Service.

  Please remove the following:

  .site-info {
      display: none
  }

• 

  ferrierawards · Member · Aug 21, 2015 at 1:48 pm

  • Copy link

  Great stuff! Many thanks for your help.

  No problem, I have removed the offending code.

  Thanks
  Fred

• 

  darrellschulte · Member · Aug 21, 2015 at 2:23 pm

  • Copy link

  You’re welcome.