Responsive menu items

  • Resolved jasonkanzler

    (@jasonkanzler)


    12 years, 7 months ago

    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

    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

    (@rdellconsulting)

    12 years, 7 months ago

    Did you see this:
    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 should be achievable.

    Thread Starter jasonkanzler

    (@jasonkanzler)

    12 years, 7 months ago

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

    Thread Starter jasonkanzler

    (@jasonkanzler)

    12 years, 7 months ago

    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.

    foamagency

    (@foamagency)

    12 years, 7 months ago

    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.