Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Dan-Thomas Tveita
Dan-Thomas Tveita
107 Points
Posted by Dan-Thomas Tveita
Dan-Thomas Tveita
107 Points

Wordpress _s:theme responsive navigation

Im building my site on the Underscores wordpress theme. But im having some problems with the included responsive navigation.

So basically the navigation ul is first hidden, then theres a media-query displaying it after 37.5ems. The menu-toggle-button is displayed, but hidden after the mediaquery. This is logical and works fine.

The media query looks like this:

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul { /* '.toggled' is added through javascript */
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
        display: none;
    }
    .main-navigation ul {
        display: block;
    }
}

Problem is that when resizing back out, before clicking the button (that changes the class) the main-navigation ul is still hidden. The class only changes on-click, not on resize.

Question is, if i can get some help making the javascript change the class when resizing the window back to above the 37.5ems...?

Was this understandable at all?

here is the javascript http://pastebin.com/jHvvVF5q

Dan-Thomas Tveita
Dan-Thomas Tveita
107 Points
Dan-Thomas Tveita
Dan-Thomas Tveita
107 Points

Summary

  1. main-navigation is hidden when window is less than 37.5ems
  2. menu-toggle displays it using javascript that changes the class
  3. resizing window back before clicking the button, does not change the main-navigation.toggled back to its original display:block; state, and so the navigation is completely invisible (obviously)

Problem would be solved if the included javascript would change the class back, after resizing the window back to 37.5ems+

Or is there something im missing here? :)

1 Answer

Dan-Thomas Tveita
Dan-Thomas Tveita
107 Points
Dan-Thomas Tveita
Dan-Thomas Tveita
107 Points

Hmm, i think i managed to solve it myself like this;

    if (matchMedia) {
        var mq = window.matchMedia("(min-width: 830px)");
        mq.addListener(WidthChange);
        WidthChange(mq);
    }

    function WidthChange(mq) {
    container.className = container.className.replace( ' toggled', '' );
    }

Ill leave the question open for a little while until ive tested it. But it seems to be working now.