원페이지 방식의 테마이기 때문에 스크롤에 따는 현재 메뉴를 highlight 시키는 기능을 script와 css를 추가 해서 완료 하도록 하겠습니다.

기존의 index.php 파일의 section의 id 부분이 숫자로 되어 있는데 이 부분을 클릭시 이동을 위해 상단 메뉴와 동일한 아이디 이름으로 변경 합니다.

index.php 파일에서 section_# 로 되어 있는 아이디 부분을 검색 해서 수정 합니다.

index.php

        <!-- services -->
        <section id="services" class="services">
		..
        <!-- about us -->
        <section id="about" class="about bg-light-gray">
		..
        <!-- portfolio -->
        <section id="portfolio" class="portfolio">
		..
        <!-- team: meet the team -->
        <section id="team" class="team bg-dark-gray">
		..
        <!-- goal -->
        <section id="goal" class="goal">
		..
        <!-- contact -->
        <section id="contact" class="contact pb-0">
		..
        <!-- sns -->
        <section id="sns" class="sns">

위과 같이 각 section의 id 값을 변경 해 주고

외모 > 메뉴 에서

위와 같이 수정하고 저장 합니다.

custom.js

    function initMenu() {
        var sectionArray = $('#primary-menu li a');
        
        $.each( sectionArray, function(index, value) {
            var $value = $(value),
                $href = $value.attr('href').slice(1);

            $(document).scroll(function() {
                var offsetSection = $('section[id='+$href+']').offset().top - offsetTop,
                    docScroll = $(document).scrollTop(),
                    docScroll1 = docScroll + 1;
                
                if ( docScroll1 >= offsetSection ) {
                    $('li a').removeClass('active');
                    $('li a:link').addClass('inactive');
                    $('li a').eq(index).addClass('active');
                    $('li a:link').eq(index).removeClass('inactive');
                }
            });
            
            sectionArray.eq(index).on('click', function(event) {
                event.preventDefault();
                var offsetClick = $('section[id='+$href+']').offset().top - offsetTop;
                $('html, body').animate({
                    'scrollTop': offsetClick
                }, 800)
            });
        });   
    }

    $( document ).ready(function() {
        initSlick();
        initMasonry();
        initMagnific();
        initCountUp();
        initScroll();
        initMenu();
    });

위의 내용은 스크롤에 따른 메뉴 highlight(해당 a 태그에 class 추가) 작업 및 클릭에 따른 이동을 자연스럽게 이동하는 스크립트 부분입니다.

여기까지 저장하고 새로고침 하면 스크롤에 따른 메뉴가 정리 된것을 확인하실 수 있습니다.

이제 거의 마무리 단계로 모바일에서 메뉴 부분을 정리하도록 하겠습니다.

custom.js

(function ($) {

    var isMobileSize = true;
    var offsetTop = 85;

    // skrollr on off
    function enableSkrollr(){
		console.log('we are on desktop');
        var s = skrollr.init({
            forceHeight: false
        });
    }
    function disableSkrollr(){
		console.log('we are on mobile');
		// Destroy Skrollr
		var s = skrollr.init();
		s.destroy();
	}
    enquire.register("screen and (min-width: 992px)", {
	    match : function() {
            enableSkrollr();
            isMobileSize = false;
            offsetTop = 85;
	    },  
	    unmatch : function() {
            disableSkrollr();
            isMobileSize = true;
            $('.site-header').removeClass('nav-up nav-down nav-top');
            offsetTop = 50;
	    }
    });

4, 23, 29: 반응형에 따라 상단 여백을 지정합니다.

        var $body = $('body'),
            $siteNavigation = $('#site-navigation'),
            $menuToggle = $('.menu-toggle'),
            $menuWrap = $('.main-navigation .menu-main-container'),
            $menuWrapAtag = $('.main-navigation .menu-main-container ul li a');
            
        $menuToggle.on('click', function(event) {
            var $this = $(this),
                status = $this.attr('aria-expanded');

            if ( status === 'true' ) {
                // open mobile menu
                $body.bind('touchmove', function(e){e.preventDefault()});
                $menuWrap.addClass('active');
                $menuWrapAtag.addClass('reset');
                $menuWrapAtag.each(function(i, el) {
                    setTimeout(function() {
                        $(el).removeClass('reset').addClass('eff');
                    }, 100 + (i * 100));
                });
            } else {
                // close mobile menu
                $body.unbind('touchmove');
                setTimeout(function() {
                    $menuWrap.removeClass('active');
                }, 200);
                $menuWrapAtag.addClass('reset').removeClass('eff');
            }
        });

        $menuWrapAtag.on('click', function() {
            $menuToggle.attr('aria-expanded', 'false');
            $siteNavigation.removeClass('toggled');
            $body.unbind('touchmove');
            $menuWrap.removeClass('active');
            $menuWrapAtag.addClass('reset').removeClass('eff'); 
        });

마지막으로 main.css 파일을 일부 수정 하겠습니다.

    .site-header .main-navigation .menu-main-container.active {
        top: 0; }

기존 .site-header .main-navigation.toggled .menu-main-container -> 부분을 .site-header .main-navigation .menu-main-container.active 로 수정 합니다.

기존에는 마우스 클릭 후 class 변화에 따른 모바일 메뉴 방식에서 마우스 클릭에 따른 class 부여 방식으로 변경 했습니다.

        .site-header .main-navigation .menu-main-container ul li {
            float: none; }
            .site-header .main-navigation .menu-main-container ul li a {
                color: rgba(0, 0, 0, 0.2);
                font-size:1.6rem;
                line-height: 1.6rem;
                height: inherit;
                padding: 0.8rem 1rem;
                width: 100%;
                position: relative;
                transition: all 0.25s ease-in-out; }
            .site-header .main-navigation .menu-main-container ul li a.reset {
                opacity: 0;
                top: -25px; }
            .site-header .main-navigation .menu-main-container ul li a.eff {
                opacity: 1;
                top : 0; }

.site-header .main-navigation .menu-main-container ul li a 클래스에
position 및 transition을 속성을 추가 하고 .reset, .eff 클래스를 추가 했습니다.
.reset 클래스를 초기화 클래스 이고
.eff 클래스는 top 및 opacity 효과를 주는 클래스 입니다.