반응형에 따른 메뉴 정리 및 전체적인 디자인을 조금씩 다듬어 가면서 사이트 퀄리티를 높이고 마무리 하도록 하겠습니다.

우선 현재 상단 메뉴가 스크롤에 따라 배경색이 없어서 하단으로 스크롤시 잘 노출이 되지 않아 메뉴 부분을 전체적으로 다시한번 정리하도록 하겠습니다.

스크롤에 따른 반응을 처리해야 하기 때문에 custom.js 파일 수정을 먼저 실행 합니다.

custom.js

(function ($) {

    var isMobileSize = true;

제일 상단에 모바일 사이즈 인지를 체크하는 변수를 하나 선언 합니다.

    function initScroll() {
        var didScroll = false,
            lastScrollTop = 0,
            delta = 5,
            navbarHeight = $('#primary-menu').outerHeight(),
            siteHeader = $('.site-header');
        
        $(window).scroll(function(event) {
            didScroll = true;
        });
        setInterval(function() {
            if ( didScroll && !isMobileSize ) {
                hasScrolled();
                didScroll = false;
            }
        }, 250);

        function hasScrolled() {
            var st = $(this).scrollTop();

            // Make sure they scroll more than delta
            if ( Math.abs(lastScrollTop - st) <= delta)
                return;
            if ( st > lastScrollTop && st > navbarHeight ) {
                // Scroll Down
                siteHeader.removeClass('nav-down').addClass('nav-up');
            } else {
                // Scroll Up
                if (st + $(window).height() < $(document).height()) {
                    siteHeader.removeClass('nav-up').addClass('nav-down');
                }
            }

            if ( st < navbarHeight ) {
                // big size menu
                siteHeader.removeClass('nav-down').addClass('nav-top');
                $('#primary-menu li a').eq(0).removeClass('active');
            } else {
                // small size menu
                siteHeader.removeClass('nav-top');
            }
            lastScrollTop = st;
        }
    }

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

윈도우 사이즈 변화 및 스크롤에 따라 클래스를 추가 및 삭제 하고 이에 따른 css를 정리 합니다.

main.css

                .site-header .main-navigation .menu-main-container ul li a {
                    background-color: transparent;
                    color: white;
                    padding: 65px 15px 30px;
                    height: 115px;
                    display: inline-block;

기존 내용중 .site-header > .main-navigation > .menu-main-container > ul > li > a 의 스타일일 일부 추가 및 수정 합니다.
160: padding 수정
161: height 고정값 추가

/* scroll */
.site-header.nav-down,
.site-header.nav-up {
    top: -30px;
    height: 115px;
    background-color: rgba(255, 255, 255, 1); }
.site-header.nav-top {
    top: 0;
    background-color: rgba(255, 255, 255, 0); }
.site-header.nav-down .main-navigation .menu-main-container ul li a,
.site-header.nav-up .main-navigation .menu-main-container ul li a {
    color: rgba(0, 0, 0, 0.3); }

위와 같이 스크롤에 따른 메뉴 스타일을 추가 해 줍니다.

            .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%; }

735: 반응형에 따른 높이 값을 추가 해 줍니다.

사이트를 새로고침 하면 스크롤과 반응형에 따라 변하는 상단 메뉴를 확인하실 수 있습니다.