Mobile Menu Mod

  • pranaman

    (@pranaman)


    11 months, 1 week ago

    I got some great help here https://wordpress.org/support/topic/vertically-centered-header/#post-18502276, and was able to fix an issue on desktop/laptop. However, when I checked on mobile, I noticed a couple of problems with the menu, https://imgur.com/Dw7Heia.

    • The menu appears misaligned — it needs to be shifted to the right a bit.
    • When I tap the Menu, not all the items are visible, and they seem to be displaying horizontally instead of vertically.

    Does anyone know how I can:

    1. Move the menu over to the right?
    2. Make the menu items display properly — stacked vertically instead of horizontally?

    Thank you.

    • This topic was modified 11 months, 1 week ago by pranaman.

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

Viewing 1 replies (of 1 total)
  • Moderator threadi

    (@threadi)

    11 months, 1 week ago

    The mobile view is currently created by applying your individual customizations for the mobile view there as well. Since you are using the Storefront theme, I would recommend taking a look at their demo: https://themes.woocommerce.com/storefront/ – there you can see how it should look.

    To solve your problem, you would therefore have to limit all the properties you have defined for the desktop to the desktop. For this purpose, there are so-called media queries in CSS. See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

    You would have to surround your customizations with this. For example:

    /* Navigation Menu */
    @media (min-width: 768px) {
    .main-navigation {
      display: flex;
      align-items: center;
    }

    .main-navigation ul {
      display: flex;
      gap: 20px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .main-navigation li a {
      padding: 8px 10px;
      display: inline-flex;
      align-items: center;
    }
    }

    This is just an untested example. I derived the threshold value for the media query from the specifications of the Storefront theme, where the breakpoint is 768px.

    Overall, however, I find it somewhat unfortunate that you are trying to solve this with custom CSS. This is exactly where such mistakes occur, because as a user rather than a developer, you don’t have the full picture. It is always better to use the options provided by the theme. And if you can’t find them, ask in their support forum: https://wordpress.org/support/theme/storefront/

Viewing 1 replies (of 1 total)

The topic ‘Mobile Menu Mod’ is closed to new replies.