Title: Responsive menu
Last modified: August 21, 2016

---

# Responsive menu

 *  Resolved [datoseb](https://wordpress.org/support/users/datoseb/)
 * (@datoseb)
 * [12 years ago](https://wordpress.org/support/topic/responsive-menu-4/)
 * Hi
 * Thank you for a the fantastic menu solution. I have it on my localhost site and
   want to menu responsive shows , when i open website on ipad or in another resolutions.
 * Here is my custom menu css:
 * .menu-item a img {
    display: block; font-size: 14px; font-weight: 300; line-height:
   30px; margin: 0; overflow: hidden; padding: 10px 15px; text-transform: uppercase;
   transition: all 0.25s ease-out 0s; width: 120px; height: 120px; } .menu-item 
   a .menu-image-hover-wrapper { display: block; } .menu-item a .menu-image-hover-
   wrapper, .menu-item a .menu-image-hover-wrapper img { float: left; } .menu-item
   a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image, .menu-item 
   a.menu-image-hovered:hover .menu-image-hover-wrapper img.menu-image { opacity:
   0; } .menu-item a.menu-image-hovered:hover .menu-image-hover-wrapper img.hovered-
   image { opacity: 1; } .menu-item a.menu-image-title-hide .menu-image-hover-wrapper,.
   menu-item a.menu-image-title-before .menu-image-hover-wrapper { vertical-align:
   top; display: inline-block; float: none; } #your-menu-id img { display: block;
 * }
    .menu-item a.menu-image-title-after img, .menu-item a.menu-image-hovered.menu-
   image-title-after .menu-image-hover-wrapper { padding-right: 10px; display: block;
   text-align: center; } .menu-item a.menu-image-title-before img, .menu-item a.
   menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper { padding-
   left: 10px; } .menu-item a .menu-image-hover-wrapper img { padding: 0; position:
   absolute; transition: opacity 0.25s ease-in-out 0s; }` `
 * Thank you
 * [https://wordpress.org/plugins/menu-image/](https://wordpress.org/plugins/menu-image/)

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

 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [12 years ago](https://wordpress.org/support/topic/responsive-menu-4/#post-4910196)
 * Hi, thank you for your solution.
 *  Thread Starter [datoseb](https://wordpress.org/support/users/datoseb/)
 * (@datoseb)
 * [12 years ago](https://wordpress.org/support/topic/responsive-menu-4/#post-4910236)
 * Hi,
 * You welcome, i was searching for a solution, how to do it responsive?
 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [12 years ago](https://wordpress.org/support/topic/responsive-menu-4/#post-4910240)
 * Use css [media query](https://wordpress.org/support/topic/responsive-menu-4/www.w3.org/TR/css3-mediaqueries/?output_format=md),
   simple example:
 *     ```
       @media (max-width: 800px) {
           /* css for devices with width less than 800px */
       }
       ```
   
 *  [pelotita](https://wordpress.org/support/users/pelotita/)
 * (@pelotita)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/responsive-menu-4/#post-4910418)
 * Use css media query, simple example:
    [@media](https://wordpress.org/support/users/media/)(
   max-width: 800px) { /* css for devices with width less than 800px */ }
 * > Hi zviryatko,
   >  Are you saying that adding this to plugin css the problem will
   > be solved? Or I should add the custom css from datoseb?
   > Thanks.
 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/responsive-menu-4/#post-4910419)
 * CSS – it’s just a style and it must depend on your theme, add it to .css file
   in your theme, some themes support adding css from theme options.
 * > Are you saying that adding this to plugin css the problem will be solved?
 * No, i didn’t. This is not a problem, it’s theme-depend feature and can’t be solved
   global.
 * > Or I should add the custom css from datoseb?
 * Try it, but if it do not help write your own css.

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

The topic ‘Responsive menu’ is closed to new replies.

 * ![](https://ps.w.org/menu-image/assets/icon-128x128.png?rev=2123398)
 * [Menu Image, Icons made easy](https://wordpress.org/plugins/menu-image/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/menu-image/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/menu-image/)
 * [Active Topics](https://wordpress.org/support/plugin/menu-image/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/menu-image/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/menu-image/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * Last activity: [11 years, 10 months ago](https://wordpress.org/support/topic/responsive-menu-4/#post-4910419)
 * Status: resolved