Title: Mobile Menu Mod
Last modified: June 7, 2025

---

# Mobile Menu Mod

 *  [pranaman](https://wordpress.org/support/users/pranaman/)
 * (@pranaman)
 * [11 months, 1 week ago](https://wordpress.org/support/topic/mobile-menu-mod/)
 * I got some great help here [https://wordpress.org/support/topic/vertically-centered-header/#post-18502276](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](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](https://wordpress.org/support/users/pranaman/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmobile-menu-mod%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Moderator [threadi](https://wordpress.org/support/users/threadi/)
 * (@threadi)
 * [11 months, 1 week ago](https://wordpress.org/support/topic/mobile-menu-mod/#post-18502331)
 * 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/](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](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:
 *     ```wp-block-code
       /* 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/](https://wordpress.org/support/theme/storefront/)

Viewing 1 replies (of 1 total)

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [threadi](https://wordpress.org/support/users/threadi/)
 * Last activity: [11 months, 1 week ago](https://wordpress.org/support/topic/mobile-menu-mod/#post-18502331)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics