menu items font and size and spacing

• 

  serealities · Member · Feb 20, 2016 at 1:06 am

  • Copy link
  • Add topic to favorites

  I would like to know how to reduce the size of the font in my menu items so that they are still legible on a phone but I need to add another item in the menu and I don’t want it to wrap when viewing from the phone. So maybe I can make them a little smaller and a little closer together. If there is css for this, I can also change the font for menu items if there is a way to do this also.
  Thanks!

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

• 

  dianakcury · Member · Feb 20, 2016 at 2:57 am

  • Copy link

  Hello,

  Try adding the following CSS:

  #access li a {
  	font-family: arial; /* a font family */
  	font-size:12px;
  	padding:0 0.5em
  }
  
  @media screen and (max-width: 600px) {
  	#access li a {
  		font-size:16px;
  	}
  }

• 

  serealities · Member · Feb 20, 2016 at 5:09 am

  • Copy link

  Hey, thanks!! that works alright but when I added the “community” menu item, it wraps on the phone. Is there any way to put menu items closer together so that the menu items do not apple to wrap on the phone?
  Thanks!

• 

  dianakcury · Member · Feb 20, 2016 at 11:53 am

  • Copy link

  Hi again, replace the previous CSS with this one:

  #access {text-align:center!important} /* center items */
  
  #access li a {
  	font-family: arial; /* a font family */
  	font-size:12px;
  	padding:0 1em
  }
  
  @media screen and (max-width: 600px) {
  	#access li a {
  		font-size:11px;
  		padding:0 0.2em
  	}
  }

  Usually, small devices should display menu items stacked, you can try this by adding:

  #access {text-align:center}
  
  #access li a {
  	font-family: arial; /* a font family */
  	font-size:12px;
  	padding:0 0.5em
  }
  
  @media screen and (max-width: 600px) {
  	#access li { display:block }
  	#access li a{
  		font-size:16px!important;
  		padding:0.5em;
  	}
  }

• 

  serealities · Member · Feb 20, 2016 at 11:05 pm

  • Copy link

  Perfect! Many thanks!

• 

  dianakcury · Member · Feb 21, 2016 at 10:37 pm

  • Copy link

  You are welcome :)

• 

  babymodels · Member · Feb 22, 2016 at 11:34 am

  • Copy link

  Hello there! I need help with getting our “menu” tabs on our blog to be centered. I’ve tried moving the tabs around but it never looks perfectly centered. Always looks kind of “scattered”. How do I do this via CSS? please. Help!!! =)
  the blog in question is http://www.babyandchildmodeling.com
  Thank you!!!

• 

  dianakcury · Member · Feb 22, 2016 at 3:01 pm

  • Copy link

  Hi @babymodels

  Please create a forum post only for your question then I will answer there :)