Tablet Navigation spaced really wide!

Hi Max,

Try this:

@media (min-width: 768px) and (max-width: 1024px) {
    .main-navigation.grid-container {
        max-width: 500px;
    }
}

Let me know.

Hey Leo!

I tried that and it didn't seem to change the width of the container.

I tried changing the px amount too just to make sure and nothing.

Any other ideas?

I have tried this on two different sites I am using Generate Press with and I get the same result with the tablet view.

Hmm give this a shot:

@media (min-width: 768px) and (max-width: 1024px) {
    .main-navigation.toggled {
        max-width: 500px;
        margin: auto;
    }
}

Let me know.

Bummer! Didn't work!

I tried adding the new code and it still didn't shorten the width. It seems to be spanning the entire width of the drop down.

Strange, it does the same on the mobile as well but doesn't look as strange because the width is so small already.

Are you basically trying to center the menu items with the arrows right next to the next?

Yes, that would be better and my buttons are spanning a huge width of the tablet view and I can't seem to change the width of those either.

Seems locked in a width for all the navigation items.

What if you did this..

@media (max-width: 768px) {
    .main-navigation .menu-item-has-children .dropdown-menu-toggle,
    .secondary-navigation .menu-item-has-children .dropdown-menu-toggle {
        float: none;
    }
    .main-navigation .main-nav ul li.menu-item-has-children > a, 
    .secondary-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 15px;
    }
}

The only problem with this is menu items without an array don't align with the others.

Let me know if that's closer to what you're looking for.

If not, it would help to see an example of the look you're hoping to achieve :)