Title: Menu Issues on Mobile Device
Last modified: August 30, 2016

---

# Menu Issues on Mobile Device

 *  Resolved [ffcoach](https://wordpress.org/support/users/ffcoach/)
 * (@ffcoach)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/menu-issues-on-mobile-device/)
 * Hello, I’m new to this forum and am a WordPress newbie.
 * I have a running website, [http://www.ffcoach.ca](http://www.ffcoach.ca), my 
   issue is that on mobile devices my menu gets blocked out by my pictures.
 * My current theme is “Interface Pro”
 * Thanks for the help and sorry in advance about my future stupid questions 😉

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Craig Ralston](https://wordpress.org/support/users/craig-ralston/)
 * (@craig-ralston)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/menu-issues-on-mobile-device/#post-6280790)
 * The container will need a `z-index` greater than 20 to show up over image (which
   has a `z-index:20;`) – You also do not have a background on the container so 
   the text is really hard to read as it overlays the image. Try something like 
   the following and then adjust from there:
 *     ```
       @media only screen and (max-width: 767px) {
           .hgroup-right {
               background: #fff;
               z-index: 21;
           }
       }
       ```
   
 *  Thread Starter [ffcoach](https://wordpress.org/support/users/ffcoach/)
 * (@ffcoach)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/menu-issues-on-mobile-device/#post-6280799)
 * Thank you so much for the help Craig, so to clarify, I would copy and paste that
   in the container section?
 * Here’s what my container says right now;
 * container {
    margin: 0 auto; max-width: 978px;
 *  }
    }
 *  [Craig Ralston](https://wordpress.org/support/users/craig-ralston/)
 * (@craig-ralston)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/menu-issues-on-mobile-device/#post-6280800)
 * Hey [@ffcoach](https://wordpress.org/support/users/ffcoach/),
 * My apologies for the confusing wording I used there. I meant that it appears `.
   hgroup-right` is the class on the element that contains your menu (which is why
   I called it a container). You should be able to copy/paste the exact CSS I posted
   above.
 *  Thread Starter [ffcoach](https://wordpress.org/support/users/ffcoach/)
 * (@ffcoach)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/menu-issues-on-mobile-device/#post-6280802)
 * Yay!!!! You’re the best Craig.
 * Thank you so much for helping someone that have very little idea of what he is
   doing 🙂
 *  [Craig Ralston](https://wordpress.org/support/users/craig-ralston/)
 * (@craig-ralston)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/menu-issues-on-mobile-device/#post-6280806)
 * Not a problem. One thing I noticed in how you implemented it though, is that 
   you didn’t include the media query portion so the background is also impacting
   your desktop menu and overlapping the page header a bit. The `@media` portion
   of the CSS posted above makes sure that this style is only applied on screens
   smaller than 767px (which is where your mobile menu switches in)
 *  Thread Starter [ffcoach](https://wordpress.org/support/users/ffcoach/)
 * (@ffcoach)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/menu-issues-on-mobile-device/#post-6280917)
 * Thanks! I’ll try to figure that out. Is that called “media query”?

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Menu Issues on Mobile Device’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 2 participants
 * Last reply from: [ffcoach](https://wordpress.org/support/users/ffcoach/)
 * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/menu-issues-on-mobile-device/#post-6280917)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics