Support » Theme: Customizr » Responsive menu items

  • Resolved jasonkanzler


    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

    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)
  • Did you see this:

    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 should be achievable.

    @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 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.

    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.

    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.