Increase Font Size Within My Menu

demofo · Member · Jul 14, 2016 at 5:44 am
Copy link

Add topic to favorites
Hello~

I need some help increasing the font size of my menu so that it’s easier on the eyes.

The blog I need help with is: (visible only to logged in users)
demofo · Member · Jul 14, 2016 at 6:32 am
Copy link
I cleaned up the menu to create more space this is the latest menu update
hallluke · Member · Jul 14, 2016 at 8:01 am
Copy link
The new menu looks good! Here’s a few things you can try to make it easier to read:
```
@media screen and (min-width: 50em) {
	.main-navigation > .grid > .row > .twelve > div > ul > li > a,
	.main-navigation > .grid > .row > .twelve > div > ul > li > ul li > a {
		font-size: 1em;
		text-transform: capitalize;
		font-weight: normal;
		line-height: 1.4;
		letter-spacing: 0.03em;
	}
	.main-navigation > .grid > .row > .twelve > div > ul > li > ul li > a {
		padding: 0.5em 1.5em;
	}
}
```
In order this will do the following, so feel free to change the values or delete the lines you don’t want:
- incread the font size
- remove the all capitals formatting
- un-bolden the text
- reduce the line height (for the drop-down menus)
- increase the spacing between letters a little
- remove some of the padding on the sides of the drop downs
demofo · Member · Jul 14, 2016 at 9:48 am
Copy link
hmm i did a copy paste and didn’t seem to get much traction. Also, what do I enter to increase the actual size? I see you have 1em. Thank you for helping me out with the other posts btw. Looks awesome!
hallluke · Member · Jul 14, 2016 at 12:20 pm
Copy link
It’s only set to show on desktop/laptop screens so if you’re checking on your phone or tablet you won’t see those changes (the menu collapses for those devices). I don’t see that code in your current custom CSS, did you save it?

For the navigation menu 1 em is the equivalent to 16px, so you can scale it up to 18 by setting it to 1.125em or down to 15 with 0.9375em.

From the screenshot it looks like you’re missing the @media line. Try it again including the entire thing and let me know how it goes.
demofo · Member · Jul 14, 2016 at 2:43 pm
Copy link
ahh I got it this time. Sorry I forgot to include the beginning part. Do you think we can go a few steps higher than 18?
hallluke · Member · Jul 14, 2016 at 3:00 pm
Copy link
Yes, just keep increasing the value you enter in ems. Remember it’s based on 1em = 16px so you can scale it up to 2em = 32px or anything in between – I’ll leave the maths to you :)

No items found.