Resizing full width menu padding between links

Hi there,

Hmm if I understand what you mean correctly, that should be the default and I see your page already does that?

Let me know if I'm missing something :)

Sorry for the late reply.

Hi there, not exactly. What I wanted to mean by that is that when I resize my windows, I want the padding between links to shrink so that all the links fit in one line, instead of not fitting it and breaking into another line.

Try to resize the windows on this website and you'll see what I mean.

Apple's website also does that.

thanks,

Unfortuantely that will take a bit of work with GP's current structure.

You will need to set different padding and font size at different width like this for example:

@media (min-width: 800px) and (max-width: 900px) {
    .main-navigation .main-nav ul li a {
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (min-width: 901px) and (max-width: 1000px) {
    .main-navigation .main-nav ul li a {
        font-size: 14px;
        padding-left: 17px;
        padding-right: 17px;
    }
}

Alternatively, our usual recommendation is to increase the mobile header breakpoint so it turns into the toggle before breaking into two lines:
https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

So I guess no fancy shrinking when resizing the window. I'll use the css then.

I think I prefer not increasing the breakpoint since I want the items to be shown as much as possible.

thanks!

No problem :)