Почему мое раскрывающееся меню не работает на панели навигации? ⇐ Jquery

[Anonymous]

Я пытаюсь разработать адаптивное верхнее навигационное меню, и у меня возникли некоторые проблемы с меню-гамбургером. Когда я изменяю размер браузера и нажимаю на значок гамбургера, он ничего не делает. У меня есть jquery в моем html, но я не могу открыть меню, когда по какой-то причине размер браузера изменяется. Буду признателен за любую помощь.
Вот мой код:

Код: Выделить всё

$('.nav-toggle').click(function() {
if ($('.top-nav-links').css('margin-top') == '-225px') {
$('.top-nav-links').css('margin-top', '0');
} else {
$('.top-nav-links').css('margin-top', '-255px');
}
});

$(window).resize(function() {
if ($(window).width() > 730) {
$('.top-nav-links').css('margin-top', '0');
} else {
$('.top-nav-links').css('margin-top', '-255px');
}
});

$(document).ready(function() {
if ($(window).width() > 730) {
$('.top-nav-links').css('margin-top', '0');
} else {
$('.top-nav-links').css('margin-top', '-255px');
}
});

Код: Выделить всё

body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
color: #333;
background-color: #f8f8f8;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

/* TOP NAVIGATION CSS */

.top-nav {
position: relative;
width: 100%;
height: auto;
background-color: #fff;
padding: 0 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

.logo:link {
color: red;
text-decoration: none;
font-size: 26pt;
margin: 10.5px 0;
display: inline-block;
float: left;
font-weight: bold;
}

.logo:visited {
color: red;
text-decoration: none;
}

.top-nav-links {
display: inline-block;
margin: 0;
float: right;
}

.top-nav-links li {
display: inline-block;
margin: 0 10px;
padding: 15px 0;
}

.top-nav-links li:first-of-type {
margin-left: 0;
}

.top-nav-links li:last-of-type {
margin-right: 0;
}

.top-nav-links li a:link {
color: red;
text-decoration: none;
font-size: 18px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.top-nav-links li a:visited {
color: red;
text-decoration: none;
font-size: 18px;
}

.top-nav-links li a:hover {
color: red;
}

.nav-toggle {
float: right;
font-size: 30px;
margin: 8.2px 0;
color: red;
cursor: pointer;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
display: none;
}

.nav-toggle:hover {
color: red;
}

@media all and (max-width: 730px) {
.top-nav-links {
position: relative;
display: block;
width: 100%;
height: auto;
margin: 0 auto;
margin-top: -255px;
display: none;
}
.top-nav-links li {
display: block;
margin: 0;
text-align: center;
}
.nav-toggle {
display: inline-block;
}
}

Код: Выделить всё

TopNav


[*]











[url=index.html]TopNav[/url]

[i][/i]

[list]

[url=#]Home[/url]

[*]
[url=#]Shop[/url]

[*]
[url=#]About Us[/url]

[*]
[url=#]Contact Us[/url]

[/list]

Подробнее здесь: https://stackoverflow.com/questions/546 ... -on-navbar