[Support request] Tablet Navigation spaced really wide!

Home Forums Support Tablet Navigation spaced really wide!

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #287894
    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
    #287971
    Leo
    Staff
    Customer Support

    Hi Max,

    Try this:

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

    Let me know.

    #288277
    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.

    #288278
    Leo
    Staff
    Customer Support

    Hmm give this a shot:

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

    Let me know.

    #288372
    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.

    #288373
    Tom
    Lead Developer
    Lead Developer

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

    #288376
    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.

    #288555
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.