change size of font for menu in twenty eleven

• 

  tracyjfox · Member · Feb 18, 2015 at 3:43 pm

  • Copy link
  • Add topic to favorites

  Hi

  I have customized CSS but can’t remember which bit of it controls the font size of the menu and sub menu pages on my website.

  Could anyone help?

  I have now added more pages and would like to reduce the size accordingly.

  My website is tracyfox.co.uk and the theme is twenty eleven.

  Many thanks in advance.

  t r a c y

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

• 

  tracyjfox · Member · Feb 19, 2015 at 8:54 am

  • Copy link

  Hi

  Can anyone help with this?

  Thanks

  t r a c y

• 

  designsimply · Member · Feb 20, 2015 at 3:28 pm

  • Copy link

  I looked at http://tracyfox.co.uk/ and I found this in your custom CSS:

  #access a, #access ul ul a {
  	font-family: tekton-pro-1, tekton-pro-2, Helvetica Neue, Helvetica, Arial, sans-serif;
  	font-size:150%;
  	padding-left:22px;
  	padding-right:22px;
  	color:#2e4556;
  	font-weight:600
  }

  Adjust the “font-size” value in that rule to make changes to the menu font size.

  To make sure the submenus still work after making a change to the font size, you will also need to adjust this:

  #access ul ul {
  	top: 4.4em;
  }

  Experiment with that number after changing the menu font size so that the submenus still work properly.

• 

  tracyjfox · Member · Feb 21, 2015 at 9:07 pm

  • Copy link

  Hi

  Thanks for your reply.

  I have amended the font size.

  I also altered the sub menu value. I have checked on my PC and Samsung galaxy tablet and the gap that was created by the decrease in font size seems to be ok.

  There seems to be a problem though when I view the site on my phone, Samsung Galaxy III as the gap is still there.

  I don’t know why it isn’t updating there aswell.

  t r a c y

• 

  designsimply · Member · Feb 24, 2015 at 2:19 pm

  • Copy link

  It could be because of a media query:
  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  Let me take a look and see what I can figure out.

• 

  designsimply · Member · Feb 24, 2015 at 3:56 pm

  • Copy link

  It’s sort of the media queries. I found the following in your custom CSS:

  @media screen and (max-width: 767px) {
  	#site-description {
  		float: left;
  		margin: .9em 0 0 .9em;
  	}
  
  	hgroup {
  		height: 100px;
  	}
  
  	#access li a {
  		line-height: 1.7;
  	}
  
  	#access ul ul {
  		top: 2.5em;
  	}
  }

  See how the top value in the last rule is way bigger than the line height in the rule above it? That’s the problem.

• 

  tracyjfox · Member · Feb 24, 2015 at 6:21 pm

  • Copy link

  Hi designsimply

  I played about with the ‘top value’ and it seems to be much better.

  Thank you for all your help with this,

  Kind regards

  t r a c y