Tablet Navigation spaced really wide!

[Max]

Hey Guys,

I was wondering why the tablet navigation menu was spaced full width when you click on the drop down and the buttons I have added look the same.

Here is the url: http://www.vividballet.com

I have tried various code and changing other code I have, can’t seem to nail it down.

GeneratePress 1.3.44

GP Premium 1.2.94

[Leo]

Hi Max,

Try this:

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

Let me know.

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

[Max]

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.

[Leo]

Hmm give this a shot:

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

Let me know.

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

[Max]

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.

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

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.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts