Support » Fixing WordPress » how to create fixed menu when scrolling page with CSS and jquery

Viewing 4 replies - 1 through 4 (of 4 total)
  • I am hoping to do the same thing, but don’t know how. I have the Twenty Eleven theme and would like to know how to do this (in very simple-elementary explanation). How to create “fixed menu,” for website??

    I’ll give this a try. Looks like the intial html may replace the code in the header which does the normal dynamic wp nav?

    The css obviously goes in style.css.

    Not sure about the Javascript but probably goes in functions.php.

    Also pretty sure wp already has Jquery library. May have to use code in functions to make sure it’s loaded.

    anyone else try it yet?

    ahh.. javascript doesnt go in functions.php :O

    it goes preferably in the footer.php file.. you can enqueue jquery.. but its just as easy to link directly to it

    header.php add this somewhere in between the <head> tags

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    for techfond.com you’ll want to add this to the footer:

    <script type="text/javascript">
    var _rys = jQuery.noConflict();
    _rys("document").ready(function(){
        _rys(window).scroll(function () {
            if (_rys(this).scrollTop() > 104) {
                _rys('#menu').addClass("f-nav");
            } else {
                _rys('#menu').removeClass("f-nav");
            }
        });
    
    });
    </script>

    you shouldnt need to replace your menu.. but you might need to replace some of the CSS to what they have on the site

    Thanks, saved me from crashing my site. How is this used without replacing the default nav? does it go after? does it over ride the defualt? work with it somehow?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘how to create fixed menu when scrolling page with CSS and jquery’ is closed to new replies.