Nav Menu не рушится

Question

Я получил источник с веб-сайта Nav Menu, и я пытаюсь использовать его в своем tumblr, но по какой-то причине отзывчивая часть меню (медиа-запрос) не рушится. Когда я делаю это локально, он рушится отлично, но как только я добавляю его в jsfiddle или tumblr, он не рушится.

https://jsfiddle.net/b1jczua7/

CSS

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { 
    #cssmenu { 
    width: 100%; 
    } 
    #cssmenu ul { 
    width: 100%; 

    } 
    #cssmenu.align-center > ul { 
    text-align: left; 
    } 
    #cssmenu ul li { 
    width: 100%; 
    border-top: 1px solid rgba(120, 120, 120, 0.2); 
    } 
    #cssmenu ul ul li, 
    #cssmenu li:hover > ul > li { 
    height: auto; 
    } 
    #cssmenu ul li a, 
    #cssmenu ul ul li a { 
    width: 100%; 
    border-bottom: 0; 
    } 
    #cssmenu > ul > li { 
    float: none; 
    } 
    #cssmenu ul ul li a { 
    padding-left: 25px; 
    } 
    #cssmenu ul ul ul li a { 
    padding-left: 35px; 
    } 
    #cssmenu ul ul li a { 
    color: #dddddd; 
    background: none; 
    } 
    #cssmenu ul ul li:hover > a, 
    #cssmenu ul ul li.active > a { 
    color: #ffffff; 
    } 
    #cssmenu ul ul, 
    #cssmenu ul ul ul, 
    #cssmenu.align-right ul ul { 
    position: relative; 
    left: 0; 
    width: 100%; 
    margin: 0; 
    text-align: left; 
    } 
    #cssmenu > ul > li.has-sub > a:after, 
    #cssmenu > ul > li.has-sub > a:before, 
    #cssmenu ul ul > li.has-sub > a:after, 
    #cssmenu ul ul > li.has-sub > a:before { 
    display: none; 
    } 
    #cssmenu #menu-button { 
    display: block; 
    padding: 17px; 
    color: #dddddd; 
    cursor: pointer; 
    font-size: 12px; 
    text-transform: uppercase; 
    font-weight: 700; 
    } 
    #cssmenu #menu-button:after { 
    position: absolute; 
    top: 22px; 
    right: 17px; 
    display: block; 
    height: 4px; 
    width: 20px; 
    border-top: 2px solid #dddddd; 
    border-bottom: 2px solid #dddddd; 
    content: ''; 
    } 
    #cssmenu #menu-button:before { 
    position: absolute; 
    top: 16px; 
    right: 17px; 
    display: block; 
    height: 2px; 
    width: 20px; 
    background: #dddddd; 
    content: ''; 
    } 
    #cssmenu #menu-button.menu-opened:after { 
    top: 23px; 
    border: 0; 
    height: 2px; 
    width: 15px; 
    background: #ffffff; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 
    #cssmenu #menu-button.menu-opened:before { 
    top: 23px; 
    background: #ffffff; 
    width: 15px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    } 
    #cssmenu .submenu-button { 
    position: absolute; 
    z-index: 99; 
    right: 0; 
    top: 0; 
    display: block; 
    border-left: 1px solid rgba(120, 120, 120, 0.2); 
    height: 46px; 
    width: 46px; 
    cursor: pointer; 
    } 
    #cssmenu .submenu-button.submenu-opened { 
    background: #262626; 
    } 
    #cssmenu ul ul .submenu-button { 
    height: 34px; 
    width: 34px; 
    } 
    #cssmenu .submenu-button:after { 
    position: absolute; 
    top: 22px; 
    right: 19px; 
    width: 8px; 
    height: 2px; 
    display: block; 
    background: #dddddd; 
    content: ''; 
    } 
    #cssmenu ul ul .submenu-button:after { 
    top: 15px; 
    right: 13px; 
    } 
    #cssmenu .submenu-button.submenu-opened:after { 
    background: #ffffff; 
    } 
    #cssmenu .submenu-button:before { 
    position: absolute; 
    top: 19px; 
    right: 22px; 
    display: block; 
    width: 2px; 
    height: 8px; 
    background: #dddddd; 
    content: ''; 
    } 
    #cssmenu ul ul .submenu-button:before { 
    top: 12px; 
    right: 16px; 
    } 
    #cssmenu .submenu-button.submenu-opened:before { 
    display: none; 
    } 
} 

Answer 1

Я думаю, что он не работает, потому что у него нет библиотеки jQuery. Там может быть любая другая проблема, которую вы можете проверить на браузере consloe.

Чтобы проверить консоль (Chrome Browser). выполните следующие действия

step 1: right click on page in browser and click on Inspect Element 
step 2: click on cnsole tag. 

Вы можете проверить ошибки в браузере консоли

Answer 2

Попробуйте добавить Jquery вместе со сценарием, как это: Demo

<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>