Centering Site Identity Text and Reducing Menu Size in Parament Theme

• 

  complexityinhealth · Member · Mar 15, 2016 at 9:37 pm

  • Copy link
  • Add topic to favorites

  I had a few questions about CSS code in the Parament Theme:

  1. How do I center the site identity text at the top of the page? Right now it is left-justified
  2. How do I reduce the size of the menu bar? It is wider than the other elements of the page
  3. Is there a way to change the spacing of the menu items within the menu bar? Right now they are centered, but the spacing leaves them sort of bunched in the middle of the menu bar. I’d like to spread them out more evenly.

  Thanks in advance!

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

• 

  thesacredpath · Member · Mar 15, 2016 at 11:22 pm

  • Copy link

  1. How do I center the site identity text at the top of the page? Right now it is left-justified

  #site-title, #site-description {
      text-align: center;
      margin-left: 0 !important;
  }

  2. How do I reduce the size of the menu bar? It is wider than the other elements of the page

  Change the #menu rule you have to this. It isn’t going to appear that it is the same size as the content, but there is some padding and margins on other elements that make things on this theme appear to be different widths, and that is by design to add interest. If you wish everything to be exactly the same width, let me know and I’ll work on removing all the padding on all the other elements to make things all aligned on the left and right.

  #menu {
      float: none;
      margin-left: auto;
      margin-right: auto;
      max-width: 970px;
      text-align: center;
  }

  3. Is there a way to change the spacing of the menu items within the menu bar? Right now they are centered, but the spacing leaves them sort of bunched in the middle of the menu bar. I’d like to spread them out more evenly.

  Give this a try and you can adjust the 25px values for left and right padding. Originally it was 15px each. One note if you add any additional top level menu items, your menu will go to two lines with this wider spacing, and when it does that, it will no longer be centered, but again left aligned. So if you add another top level menu item you will need to adjust the left and right padding.

  #menu a {
      padding-left: 25px;
      padding-right: 25px;
  }

• 

  complexityinhealth · Member · Mar 16, 2016 at 12:10 am

  • Copy link

  Outstanding…thank you for all your help!!

• 

  thesacredpath · Member · Mar 16, 2016 at 1:15 am

  • Copy link

  You are welcome.