Ask your WordPress questions! Pay money and get answers fast! (more info)

Javascript Problem With Responsive Navigation Menu

  • SOLVED

Hi,

I'm using the code for the responsive navigation menu from here:
[[LINK href="http://filamentgroup.com/lab/responsive_design_approach_for_navigation/"]]http://filamentgroup.com/lab/responsive_design_approach_for_navigation/[[/LINK]]

There is one line of code, at least I think that one line is responsible for not getting it to work right for my own project, and that looks like this:


if ( (nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top) ) {


Here is a jsFiddle that demonstrates the problem: [[LINK href="http://jsfiddle.net/TaBnH/"]]http://jsfiddle.net/TaBnH/[[/LINK]]

In full width the navigation menu should be a regular header nav menu, but it's showing the drop down type menu.

If you remove the logo, then the menu in full width shows up normal, but when the screen gets smaller, the drop menu isn't activated.

This problem is related to the javascript code, but I don't understand it.

Your help is much appreciated.

Thanks in advance!

Answers (2)

2012-07-23

Hai Bui answers:

Your layout is not compatible with this script. This script requires the logo to be on the left or right of the menu (same offset top).
If you want to put the logo above the menu, please remove this part from that line nav.offset().top > nav.prev().offset().top) ||



Edwin comments:

Thanks Hai Bui!

That helped me along, much appreciated!
I've voted full prize for you.

2012-07-23

Michael Caputo answers:

Scratch that. Misunderstood your request.