How to create a fixed Menu

  • Resolved Itumphoso

    (@itumphoso)


    8 years, 7 months ago

    Hi everyone,

    I need to create a fixed menu. i.e. a main menu that does not disappear when I scroll down. I have tried to edit custom.css and style.css:

    #menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

    But nothing happened.

    You help shall be highly appreciated.

Viewing 1 replies (of 1 total)
  • Theme Author simplethemes

    (@simplethemes)

    8 years, 2 months ago

    I use this for fixed menus:
    https://github.com/bbarakaci/fixto

    You’ll need to download it, upload /dist/fixto.min.js to a newly created skeleton_childtheme/js/ directory in your child theme.

    Next, enqueue it in your child skeleton_childtheme/functions.php like so:

    function my_custom_scripts() {
    $version = wp_get_theme()->Version;
    wp_enqueue_script('fixto',get_stylesheet_directory_uri()."/js/fixto.min.js",array('jquery'),$version,true);
    wp_enqueue_script('child-custom',get_stylesheet_directory_uri()."/js/custom.js",array('jquery'),$version,true);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts');

    Create another file in skeleton_childtheme/js/ named custom.js and insert this:

    jQuery(document).ready(function($) {
    $('#navigation').fixTo('body');
});

    Add the following css to your style.css:

    #navigation {
    z-index: 9;
}
body.logged-in.admin-bar #navigation.fixto-fixed {
    padding-top: 32px;
}

    and you’ll have:
    http://cl.ly/2K1V3y3x0P3Q

Viewing 1 replies (of 1 total)
  • The topic ‘How to create a fixed Menu’ is closed to new replies.

Tags