Sticky Menu Possible?

Hot WordPress Themes Support Forum WordPress Themes Golf Sticky Menu Possible?

  • This topic has 1 reply, 2 voices, and was last updated 1 year ago by milos.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #9219
    Mary Stremmel
    Participant

    is there an easy way to make the menu a sticky menu?

    #9222
    milos
    Moderator

    Hello,

    1. You should edit file /wp-content/themes/hot-golf/js/sparky.js and after line:

    "use strict";

    add this:

        jQuery(window).scroll(function() {
            var stopScrollHeight = 300;
            var currentScrollLevel = jQuery(window).scrollTop();
            if ( currentScrollLevel >= stopScrollHeight ) {
                jQuery(".logorow").addClass("fix_menu topmenushow");
            }else{
                jQuery(".logorow").removeClass("fix_menu topmenushow");
            }
        });

    2. Edit file /wp-content/themes/hot-golf/sparky.css and after this:

    .logorow .menu.starting li:hover a, .logorow .menu.starting li.current_page_item a {
    	color: #ffffff;
    }

    add this:

    .logorow.fix_menu {
        position: fixed !important;
        top: 0 !important;
        z-index: 89;
        width: 100%;
        background: #333 !important;
        border-bottom: 1px solid #dde5de;
        padding: 0;
    }
    
    .admin-bar .logorow.fix_menu {
        top: 32px !important;
    }
    
    .topmenushow {
        -webkit-animation-name: topmenushow;
        -moz-animation-name: topmenushow;
        -o-animation-name: topmenushow;
        animation-name: topmenushow;
        -webkit-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: .5s;
        -moz-animation-duration: .5s;
        -ms-animation-duration: .5s;
        -o-animation-duration: .5s;
        animation-duration: .5s;
    }
    
    @keyframes topmenushow {
        0% {
            opacity: 0;
            transform: translateY(-50px);
        }
        
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    Best regards,
    Milos

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.