Title: Resonsive Menu Panel Width
Last modified: January 27, 2017

---

# Resonsive Menu Panel Width

 *  Resolved [nixiemartyn](https://wordpress.org/support/users/nixiemartyn/)
 * (@nixiemartyn)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/resonsive-menu-panel-width/)
 * Hi!
 * Awesome plugin, keep up the good work!
 * I noticed that when using a pixel value for the menu panel instead of a percentage
   value, the menu is not responsive for values less than the pixel width defined.
 * For instance, if I want to use 450 pixel width for my menu it works fine until
   the screen size is less than 450 pixels wide – for instance on an Iphone5 (Which
   has 320 pixels width).
 * If it would be possible to set a percentage of 100 percent to kick in at 450 
   pixel width or less that would be great.
 * Of course it would be possible to set the pixel width to 320, but some of my 
   menu navigation items have quite a few words and need a panel width of 450 to
   not cut off mid sentence.
 * Thank you for your help!
 * Nixie

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

 *  Thread Starter [nixiemartyn](https://wordpress.org/support/users/nixiemartyn/)
 * (@nixiemartyn)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/resonsive-menu-panel-width/#post-8704943)
 * For this mobile menu I am using the right menu panel.
 *  Plugin Author [Rui Guerreiro](https://wordpress.org/support/users/takanakui/)
 * (@takanakui)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/resonsive-menu-panel-width/#post-8706609)
 * Hi,
 * Can you try this css. The maximum is 90% so you can click in the closing menu
   icon.
 *     ```
       @media only screen and (max-width: 450px) {
         .mob-menu-right-panel {
           width: 90%!important;
           -webkit-transform: translateX(-90%)!important;
           -moz-transform: translateX(-90%)!important;
           -ms-transform: translateX(-90%)!important;
           -o-transform: translateX(-90%)!important;
           transform: translateX(-90%)!important;
         }
       }
       ```
   
 * Let me know if it worked.
 * -Takanakui
 *  Thread Starter [nixiemartyn](https://wordpress.org/support/users/nixiemartyn/)
 * (@nixiemartyn)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/resonsive-menu-panel-width/#post-8710960)
 * Hi Takanakui!
 * Using this code, what happens is that at the specified max-width (450px) an additional
   menu appears and overlays on the other side of the screen – therefore making 
   the navigation unusable because it breaks the site on this screen size:
 * ![The menu is on the left side now](https://i0.wp.com/dl.dropboxusercontent.com/
   u/158059/www/wpforum/mobilemenu_overlay.JPG?ssl=1)
 * Clicking the hamburger icon moves the content to the left:
 * ![Clicking on the hamburger icon moves the content to the left.](https://i0.wp.
   com/dl.dropboxusercontent.com/u/158059/www/wpforum/mobilemenu_overlay_onclick.
   JPG?ssl=1)
 * Is there a way to disable mobile menu at a specified max-width? For instance,
   use mobile menu at the range of 450px -2000px. For screen sizes less than 450
   the Genesis navigation will kick in. I noticed this plugin disables the default
   Genesis responsive menu.
 * I know this might be the opposite of the intended use for this plugin, but it
   would suit my purpose if it did.
 * I tried this code, but it didn’t work:
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   450px) {
    .show-nav-right .mobmenu-push-wrap, .show-nav-right .mob_menu_header_div{
   display: none; } }
 * Thank you for our help!
 *  Plugin Author [Rui Guerreiro](https://wordpress.org/support/users/takanakui/)
 * (@takanakui)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/resonsive-menu-panel-width/#post-8711337)
 * Just try to clear the browser cache and test again since with my code the panel
   should occupy 90% of the screen and it doesn’t seem to be happening.
 * Regarding your code, guess it’s just missing the !important tag.
    Try this one
 *     ```
       @media only screen and (max-width: 450px) {
       .show-nav-right .mobmenu-push-wrap, .show-nav-right .mob_menu_header_div {
       display: none!important;
       }
       }
       ```
   
 * -Takanakui
 *  Thread Starter [nixiemartyn](https://wordpress.org/support/users/nixiemartyn/)
 * (@nixiemartyn)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/resonsive-menu-panel-width/#post-8716751)
 * Hi again!
 * I’ve tried the code on two sites built with the Genesis Framework + Dynamik. 
   Whenever I put in your code with the “width: 90%!important;”, an additional menu
   appears on the opposite side of the screen.
 * The code with the “display: none!important;” only removes the hamburger menu 
   icon, not the menu itself. The hamburger icon is there until I click on it and
   the mobile menu pans in from the right.
 * I tried removing all other css from the sites. There might be an issue with the
   Genesis Framework + Dynamik?
 *  Plugin Author [Rui Guerreiro](https://wordpress.org/support/users/takanakui/)
 * (@takanakui)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/resonsive-menu-panel-width/#post-8725645)
 * So we can discuss this further, can you send me an email to takanakui at gmail
   dot com
 * thanks
 * -Takanakui

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

The topic ‘Resonsive Menu Panel Width’ is closed to new replies.

 * ![](https://ps.w.org/mobile-menu/assets/icon-128x128.png?rev=1890426)
 * [WP Mobile Menu - The Mobile-Friendly Responsive Menu](https://wordpress.org/plugins/mobile-menu/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/mobile-menu/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/mobile-menu/)
 * [Active Topics](https://wordpress.org/support/plugin/mobile-menu/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/mobile-menu/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/mobile-menu/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 6 replies
 * 2 participants
 * Last reply from: [Rui Guerreiro](https://wordpress.org/support/users/takanakui/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/resonsive-menu-panel-width/#post-8725645)
 * Status: resolved