Menu buttons small screen full width

  • Resolved nico6293

    (@nico6293)


    3 years, 7 months ago

    Hi there

    Now the buttons of the navigation menu on small screens as mobile phones are somewhat wider than the text of the buttons

    I would like those buttons to be as wide as the screen.

    Can that be done using CSS?

    Kind regards,
    Nico

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Leo

    (@leohsiang)

    Hi there,

    That’s not the default appearance of the mobile menu in the free GP theme.

    Perhaps this CSS you’ve added is causing the issue?

    .main-navigation .main-nav ul li {
    display: flex;
    align-items: center;
}
    Thread Starter nico6293

    (@nico6293)

    Hi Leo
    Thanks for the tip. It works fine.
    Kind regards,
    Nico

    Leo

    (@leohsiang)

    No problem ??

    Thread Starter nico6293

    (@nico6293)

    Hi Leo

    Now I see that the menu item buttons on small screens are not as wide as the screen itself.

    Is this adustable, so I can make the buttons the same width as the screen?

    Thanks again,
    Nico

    Leo

    (@leohsiang)

    Try this CSS:

    @media (max-width: 768px) {
    .nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container {
        padding: 0;
    }
}
    • This reply was modified 3 years, 7 months ago by Leo.
    Thread Starter nico6293

    (@nico6293)

    Thanks Leo

    It works fine.

    Kind regards,
    Nico

    Leo

    (@leohsiang)

    Glad to help ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Menu buttons small screen full width’ is closed to new replies.