Archived topic

Keep menu on one line

1 reply · Started by Aymeric on May 22, 2020

Viewing posts 1–2 of 2

May 22, 2020 at 1:08 pm #1297203

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.

May 22, 2020 at 4:13 pm #1297327

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.

This archived topic is closed to new replies.

Start building better websites today.