Font Sizes on Desktop, Tablet & Mobile

[Mary Pearson]

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!

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mary Pearson]

Many thanks Leo. I didn’t realize. Much appreciated!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts