Question

I am beginner in JS.
I found wonderful example of responsive menu, and put code inside functions.php. Menu must works like here http://filamentgroup.com/examples/rwd-nav-patterns/ but i have the bug – dropdown menu shift to the right in my site when I use tablet mode.

I tried to include this menu in my site, based on Bootstrap http://b.pusku.com

Answer 1

UPDATE:

Part of the problem with the fiddle was that the space allotted for the logo image was too wide, so I added the following to correct that:

#logo > img {
    width: 25px;
}

To get the dropdown to float left at all times, add:

.nav-menu .nav-primary {
    float: left;
    clear: none;
}

to the @media screen and (min-width: 910px) rule…

@media screen and (min-width: 910px) {
    .nav-primary {
        float: right;
        clear: none;
    }   
    .nav-menu .nav-primary {
        float: left;
        clear: none;
    }
}

Once the navigation links collapse to a dropdown, they’ll float left. The links will have an offset of 25px on the left because of the following rule in bootstrap.css (on line 728):

ul, ol {
    padding: 0;
    margin: 0 0 10px 25px; /*specifically this rule*/
}

You can override that, if you like, by adding margin-left: 0; to the .nav-primary ul rule:

.nav-primary ul {
   border: 1px solid #e6e6e6;
    margin-left: 0; /* add this to override the bootstrap.css rule*/
}

Finally, as the screen width narrows, the dropdown’s width seems to stretch the entire width. If this is not a desired effect, add display: inline-block; to the .nav-primary rule:

.nav-primary {
    clear: left;
    margin: 0 0 2em;
    display: inline-block;
}

I’ve also re-written the javascript that makes the “responsive” navigation collapse to a dropdown using more (appropriately named) variables so you may better understand why the script does what it does:

$(document).ready(function () {
    'use strict';
    $('.nav-primary')
    // test the menu to see if all items fit horizontally
        .bind('testfit', function () {
            var nav = $(this),
                navPrimaryTop = nav.offset().top, // top of div.nav-primary
                navSkipNavTop = nav.prev().offset().top, // top of p containing a#main
                topOfFirstLink = nav.find('li:first-child').offset().top, //top of "What We Done"
                topOfLastLink = nav.find('li:last-child').offset().top, //top of "Contact Us"
                navBelowSkipNav = navPrimaryTop > navSkipNavTop, //boolean indicating whether div.nav-primary is below the p containing a#main
                lastLinkBelowFirstLink = topOfLastLink > topOfFirstLink, //boolean indicating whether "Contact Us" is below "What We Done"
                displayAsMenu = navBelowSkipNav || lastLinkBelowFirstLink; // boolean indicating whether to collapse to a dropdown menu
            $('body').removeClass('nav-menu');
            if (displayAsMenu) {
                $('body').addClass('nav-menu');
            }
        })
        // toggle the menu items' visiblity
        .find('h3').bind('click focus', function () {
            $(this).parent().toggleClass('expanded');
        });
    // ...and update the nav on window events
    $(window).bind('load resize orientationchange', function () {
        $('.nav-primary').trigger('testfit');
    });
});

Here’s an updated fiddle demonstrating the basics: http://jsfiddle.net/DD7MC/1/

I did not override either the margin-left or the display in the updated fiddle.

ORIGINAL:

I think it’s a CSS conflict between rwd-nav.css and bootstrap.css. Try changing the class definition for .nav-menu .nav-primary h3 in rwd-nav.css to:

.nav-menu .nav-primary h3 {
   position: absolute;
   top: -10px; /* <-- change this line */
   left: auto;
   right: 0;
   display: block;
   width: 4em;
   height: 3.75em;  /* <-- change this line */
   background: #ccc url(img/icons.png) no-repeat -205px 45%;
   text-indent: -999em;
   cursor: pointer;
   font-size: inherit; /* <-- add this line */
}

Also, your hosting provider is returning a 404 for url(img/icons.png). You may want to make sure that file exists.