Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Working on a theme template and trying to make the menu responsive, so that it will change from a horizontal layout into a block format at a certain screen resolution. I have tried one tutorial which I couldn't get to work, lack of experience on my behalf but also a little unsure how to implement in to WordPress as the menu is generated dynamically, and the tutorial was based on a fixed HTML structure menu. Now attempting a second but hitting a wall at the moment, hence my question.

The tutorial I am following is located below, the author has been helpful but I don't want to push his patience. I have some comments on his blog, which explains a little but will reiterate all below.

http://www.justinwhall.com/responsive-drop-down-menu-with-css-media-queries-jquery/#comment-8391

I have copied his Java script into a file called mobile-menu.js then registered and enqueued this in the correct way within functions.php

I am using a test website http://www.simples.net23.net

The CSS I am using is as follows:

/*=========== helper classes =====================*/
p.mobile-nav {
  display: none;
  margin-bottom: .5em;
  font-size: 1.4em !important; }
p.mobile-nav span {
  font-size: 1.3em; }
.mobile li {
  display: block;
  width: 43%;
  border-bottom: 1px solid #ccc;
  float: left;
  padding: 10px 0;
  font-size: 1.2em;
}
@media only screen
and (max-width : 768px) {
  p.mobile-nav {
  display: block; }
}

I haven't placed all the Java code here as it's about 30 lines, and is possibly better read on his blog.

Below is some of the code from my header.php file, regarding the menu:

<header id="header_container" class="group">

<div id="nav">      
<nav class="main-menu">
Menu <span>+</span>
<?php   /* Adding the menu called 'main' to the header, within HTML5 tag */
wp_nav_menu( array( 'theme_location' => 'main' ) );
?>
</nav>
</div>

</header>

I think my issue lies with my HTML and CSS, and using the correct selectors so the Java script can work it's magic. I have looked at the generated menu with Firebug, but as it's generated by WordPress having a bit of an issue understanding the structure, and then the correct selectors to use.

Cheers,

Ant

share|improve this question
add comment

1 Answer 1

up vote 2 down vote accepted

Looking at that tutorial, you need to match up the jQuery selector with the menu markup. You can see in this line

navigation: $('#nav ul'),

that the jQuery expects your menu to be in a <ul> inside a parent element with the id nav. Luckily, that's really easy to do. Just change your wp_nav_menu() arguments to:

wp_nav_menu( array( 'theme_location' => 'main', 'container_id'=>'nav' ) );

wp_nav_menu() can do a lot more than that, so you might want to go through the available arguments just for future knowledge.

Also, it seems worth mentioning that the new official WordPress theme Twenty Twelve uses a responsive menu solution that you might want to take a look at.

share|improve this answer
    
mrwweb this sounds exactly what I am looking for,I will have a look at this later today and get back, cheers for the quick response. Cheers for the tip on the Twenty Twelve theme as well. –  Ant Oct 5 '12 at 6:24
    
mrwweb, I ended up opting for the twentyywelve way and have isolated all the components. So thanks for the tip. –  Ant Oct 6 '12 at 10:14
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.