Title: Responsive menu items
Last modified: August 21, 2016

---

# Responsive menu items

 *  Resolved [jasonkanzler](https://wordpress.org/support/users/jasonkanzler/)
 * (@jasonkanzler)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/responsive-menu-items/)
 * I have been messing around in Chrome’s inspector and I can’t seem to figure out
   a solution for this:
 * I’m trying to change the default Customizr responsiveness. I changed the menu(
   with 8 links) to be full width, got rid of the social icons, and gave each menu
   item `width: 12.5%` in order to evenly fill the full 100%.
 * **What I want to do:** I’m trying to make it so that when my viewport is less
   than 800px the menu bar wraps and I get 2 rows of 4 links. Then, when the viewport
   goes below 500px, I want 4 rows of 2 links.
 * I can’t for the life of me get the menu items to wrap. Help would be greatly 
   appreciated. The website is [jasonkanzler.com](http://jasonkanzler.com)
 * **Edit:** It would be helpful if I could find the piece of CSS (or is it a PHP
   template?) that is causing my menu to disappear at viewport widths below 800px…

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

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/responsive-menu-items/#post-4189082)
 * Did you see this:
    [http://www.themesandco.com/snippet/media-queries-responsiveness/](http://www.themesandco.com/snippet/media-queries-responsiveness/)
 * Customizr responsiveness is based on Twitter Bootstrap, so I would recommend 
   you to try to use it rather than hacking core code around. Changing CSS with 
   [@media](https://wordpress.org/support/users/media/) should be achievable.
 *  Thread Starter [jasonkanzler](https://wordpress.org/support/users/jasonkanzler/)
 * (@jasonkanzler)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/responsive-menu-items/#post-4189086)
 * [@rdellconsulting](https://wordpress.org/support/users/rdellconsulting/) Yes 
   I have read through that article. I’m aware it’s built off the bootstrap framework.
   I have been trying to change the CSS with [@media](https://wordpress.org/support/users/media/)
   queries but with no luck. Like I said in the OP, my menu disappears at widths
   below 800px and I cannot find the CSS that is causing this.
 *  Thread Starter [jasonkanzler](https://wordpress.org/support/users/jasonkanzler/)
 * (@jasonkanzler)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/responsive-menu-items/#post-4189089)
 * Did brute force trial and error in Chrome’s inspector and figured it out.
 * Here’s the code I had to add to my child theme’s style.css (for those interested):
 * > `@media (max-width: 979px) {`
   >  `.nav-collapse .nav > li {` `width: 25%;` `float:
   > left;` `border-right: none;` `}` `.navbar.resp {` `display: block;` `}` `.nav-
   > collapse, .nav-collapse.collapse {` `overflow: visible;` `position: relative;``
   > right: 0;` `top: 0;` `}` `}`
   > `@media (max-width: 499px) {`
   >  `.nav-collapse .nav > li {` `width: 50%;` `}``}`
 * Follow up question [here](http://wordpress.org/support/topic/inject-css-classes-into-menu-items?replies=1#post-4724618).
 *  [foamagency](https://wordpress.org/support/users/foamagency/)
 * (@foamagency)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/responsive-menu-items/#post-4189148)
 * Thanks!! This is exactly the piece of code I needed.
 * Only one question… My menu bar wraps, but the black icon from the drop-down menu
   keeps appearing. How do I keep it from showing up?

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

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

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 4 replies
 * 3 participants
 * Last reply from: [foamagency](https://wordpress.org/support/users/foamagency/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/responsive-menu-items/#post-4189148)
 * Status: resolved