Archived topic
Font Sizes on Desktop, Tablet & Mobile
3 replies · Started by Mary Pearson on October 15, 2020
For Primary Menu I have Desktop at 16 px with Tablet and Mobile at 24 px. I did this in Customizer by just changing the icons at the bottom of the page and Publishing with each font size setting. All works perfectly. But when I try to do the same thing with Secondary menu, it will only save the most recent setting, so all fonts are either 16 px or 24px.
How do I get them to work independently, as I did with Primary Menu?
Website is https://longfarms.ca/
Thanks!
Hi Mary,
The primary navigation font size setting works as it has responsive options:
https://www.screencast.com/t/qs2d9choGwxh
Unfortunately, the secondary navigation doesn't have responsive options currently:
https://www.screencast.com/t/fEhskrNzo1
We will be adding it in when we upgrade the typography module down the road.
For now you can use this CSS to change the mobile font size:
@media (max-width: 768px) {
.secondary-navigation .main-nav ul li a, .secondary-navigation .menu-toggle, .secondary-menu-bar-items .menu-bar-item > a {
font-size: 24px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Many thanks Leo. I didn't realize. Much appreciated!
No problem :)
