Menu font resizing

• 

  norcalbears · Member · Feb 10, 2017 at 8:39 pm

  • Copy link
  • Add topic to favorites

  Hello,

  New to CSS and learning fast but have come up against something tricky. On our mobile site I’d like to change the font size of my “menu” button and despite trying as many titles for it in CSS I could think of it just won’t change. Got the site title and description font sizes to change but not the menu. How do I figure out what code that would be to effect the menu? I want it larger.

  That was the easy question I think 😉

  Second problem, when I click the above mentioned menu button the respondent menu of my parent pages come up and the font size is perfect but when you go to the menu button from a parent page then the respondent menu of parent pages come up in a much larger font and this is what I need to fix — needs to be smaller

  Basically two font resizing questions that I can’t figure out.

  Thanks a million for your help!!!

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

• 

  staff-loquaciousloon · Staff · Feb 10, 2017 at 9:43 pm

  • Copy link

  Hi @norcalbears!

  You can increase the size of the menu toggle with this style:

  .site-navigation-toggle {
  	font-size: 24px;
  }

  The menu size you’re seeing is coming from the CSS you’ve already added:

  @media only screen and (max-width: 640px) {
  	h1.site-title {
  		font-size: 2.9em;
  	}
  }
  
  @media only screen and (max-width: 480px) {
  	h1.menu, a {
  		font-size: .9em;
  	}
  }

  In CSS a comma lets you list the different kinds of elements you want your style to apply to. That means you’ve applied those font sizes to all a element.

  If you remove those styles, the other CSS you’ve used should take effect and make those element larger. Depending on your goals, you might have more CSS than you need right now :)

  Try removing those styles and seeing how it looks. If the sizes need to be changed, leave it as it is (without those two styles I’ve copied above) and post here describing how you’d like them to be different. Then I’ll help you work out some code :)