Centre a menu

• 

  musicfootballfatherhood · Member · Mar 24, 2016 at 8:33 pm

  • Copy link
  • Add topic to favorites

  Hello, I’m looking to centre the menu on my site rather than it being aligned to the right.

  Can someone help me out with a CSS code please? it’s the silvio theme.

  Thanks
  Elliott

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

• 

  charliescheer · Member · Mar 24, 2016 at 10:05 pm

  • Copy link

  Hello,

  Try adding this text to your CSS customization.

  .main-navigation {
  width: 100%;
  text-align: center;
  }

  That should move your menu to center. Let me know if you have any questions.

• 

  musicfootballfatherhood · Member · Mar 25, 2016 at 1:06 am

  • Copy link

  Thanks Charlie. It worked but the font has changed and it’s no longer in bold. Is there a way of making it stand out in bold?

• 

  charliescheer · Member · Mar 25, 2016 at 1:46 am

  • Copy link

  Hmm. That’s strange, it shouldn’t have changed the text style at all, to add more bold to the text in your main menu add this text to your CSS Customization.

  .nav-menu li a {
  font-weight: bold;
  }

  If that is not bold enough you can try doing something like font-weight:750; or font-weight: 900; That should make it plenty bold!

  I hope this helps. Let me know if you have any more questions.

• 

  thesacredpath · Member · Mar 25, 2016 at 3:56 am

  • Copy link

  For the centering code, try this instead.

  .main-navigation {
      text-align: center;
      width: 90%;
  }

  Also, we are not allowed to hide or edit the WordPress.com and theme footer credits per our Terms of Service (#1 Attribution). See the Frequently Asked Questions on the Custom Design support page for more information.

  You are allowed to restyle the footer credits to better fit with your design as long as they remain readable, and you are also allowed to add text to the footer, such as a copyright statement. If you need help restyling, or adding to, the existing footer credits, let us know and we would be happy to help. Please remove this code from your custom CSS.

  .site-footer {
      display: none;
  }