[Resolved] Keep menu on one line

[Aymeric]

Hi,

I want the size of my menu items (including social media icons) to adjust as the screen size get smaller. I already changed the mobile breakpoint but I think it’s still too high. Right now, I get two line of menu on ipad screen size. Is there a way to shrink menu items at the moment we shrink the window size (like in apple.com website) ? Thanks for the help.

[Tom]

Hi there,

You’ll need to use media queries.

For example:

@media (max-width: 1200px) {
    .main-navigation a {
        font-size: 20px;
    }
}

@media (max-width: 1000px) {
    .main-navigation a {
        font-size: 18px;
    }
}

And so on.

[Author]

Posts