jquery не работает внутри
media, помогите понять что сделать, чтобы работал.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Новостное агенство</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="styles500.css">
</head>
<body>
<div id="black-bar">
<div class="fixed-container">
Самые <a href="#">свежие новости</a> в реальном времени
<div id="datetime">21:18 29.06.2020</div>
</div>
</div>
<header>
<div class="fixed-container">
<div id="bigscreen">
<img id="logo" src="img/logo.png">
<select id="city" size="1">
<option>Москва</option>
</select>
<div id="datetime2"><small>29 июня, понедельник</small></div>
<div id="datetime3"><small>21:18</small></div>
<div id="weather"><small>+22°C</small></div>
<input id="find" type="text" placeholder="Поиск по сайту" name="find">
</div>
<div id="hamenu">
<button class="c-hamburger c-hamburger-line">
<span>menu</span>
</button>
<img class="img-svg" src="img/internet.svg">
<span id="newsAgent">Новостное агенство</span>
<input type="image" id="srch2" src="img/search.svg">
<input class="srch3" type="search">
<div id="aHaMenu" style="display: none;">
<a href="#"><b>Главная</b></a><br>
<hr>
<a href="#"><b>Политика</b></a><br>
<hr>
<a href="#"><b>Общество</b></a><br>
<hr>
<a href="#"><b>Экономика</b></a><br>
<hr>
<a href="#"><b>В Мире</b></a><br>
<hr>
<a href="#"><b>Происшествия</b></a><br>
<hr>
<a href="#"><b>Спорт</b></a><br>
<hr>
<a href="#"><b>Наука</b></a><br>
<hr>
<a href="#"><b>Туризм</b></a><br>
</div>
</div>
<div id="menu-container">
<a href="#"><b>Главная</b></a>
<a href="#"><b>Политика</b></a>
<a href="#"><b>Общество</b></a>
<a href="#"><b>Экономика</b></a>
<a href="#"><b>В Мире</b></a>
<a href="#"><b>Происшествия</b></a>
<a href="#"><b>Спорт</b></a>
<a href="#"><b>Наука</b></a>
<a href="#"><b>Туризм</b></a>
</div>
</div>
</header>
<div id="central-container">
<div class="fixed-container">
<div id="column-left">
<h2>Новости дня</h2>
<div class="news-item">
<div class="news-item-text">
Кот Ахилл предсказал победу российской сборной над Египтом на ЧМ-2018
</div>
<div class="news-item-props">
<a href="#">/ЧМ по футболу</a>
<div class="news-time">10:45</div>
<div class="news-comments-count">17</div>
</div>
</div>
<div class="news-item">
<div class="news-item-text">
«Нафтогаз»: суд разрешил заморозить активы «Газпрома» в Великобритании
</div>
<div class="news-item-props">
<a href="#">/Политика</a>
<div class="news-time">10:45</div>
<div class="news-comments-count">10</div>
</div>
</div>
<div class="news-item">
<div class="news-item-text">
Минтранс предписал оборудовать общественный транспорт кондиционерами
</div>
<div class="news-item-props">
<a href="#">/Транспорт</a>
<div class="news-time">10:45</div>
<div class="news-comments-count">20</div>
</div>
</div>
<div class="news-item">
<div class="news-item-text">
Летние кафе Москвы временно закроются из-за непогоды
</div>
<div class="news-item-props">
<a href="#">/Погода</a>
<div class="news-time">10:45</div>
<div class="news-comments-count">197</div>
</div>
</div>
<div class="news-item">
<div class="news-item-text">
Комплексное благоустройство Щелковского шоссе завершится в июне
</div>
<div class="news-item-props">
<a href="#">/Транспорт</a>
<div class="news-time">10:45</div>
<div class="news-comments-count">17</div>
</div>
</div>
<div class="news-item">
<div class="news-item-text">
В Москве назвали самое популярное мороженое у болельщиков ЧМ-2018
</div>
<div class="news-item-props">
<a href="#">/ЧМ по футболу</a>
<div class="news-time">10:45</div>
<div class="news-comments-count">17</div>
</div>
</div>
<button id="changeButton">Change!</button>
</div> -->
<!-- <div id="column-right">
<img src="img/banner-1.png">
<img src="img/banner-2.png">
</div>
</div>
</div>
<script src="jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
@media all and (max-width: 501px) and (min-width: 320px) {
#bigscreen {
display: none;
}
#menu-container {
display: none;
}
.fixed-container {
max-width: auto;
padding: 0;
}
#black-bar {
font-size: 12px;
}
#datetime {
display: none;
}
.c-hamburger {
display: block;
position: relative;
right: 0;
top: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 46px;
height: 46px;
font-size: 0;
border: none;
box-shadow: none;
cursor: pointer;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 21px;
left: 8px;
right: 8px;
height: 4px;
background: #000;
}
.c-hamburger span::before, .c-hamburger span::after {
display: block;
position: absolute;
left: 0px;
width: 100%;
height: 4px;
background: #000;
content: "";
}
.c-hamburger span::before {
top: -10px;
}
.c-hamburger span::after {
bottom: -10px;
}
/* .c-hamburger-line {
background: #91919f;
} */
.c-hamburger-line span {
transition: background 0s 0.3s;
}
.c-hamburger-line span::before, .c-hamburger-line span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.c-hamburger-line span::before {
transition-property: top, transform;
}
.c-hamburger-line span::after {
transition-property: bottom, transform;
}
/* .c-hamburger-line.is-active {
background: #91919f;
} */
.c-hamburger-line.is-active span {
background: none;
}
.c-hamburger-line.is-active span::before {
top: 0;
transform: rotate(-45deg);
}
.c-hamburger-line.is-active span::after {
bottom: 0;
transform: rotate(45deg);
}
.c-hamburger-line.is-active span::before, .c-hamburger-line.is-active span::after {
transition-delay: 0s, 0.3s;
}
#hamenu {
width: 350px;
background: #fff;
left: 0;
top: 0;
bottom: 0;
transition: all ease 1s;
z-index: 9999;
display: block;
}
#aHaMenu {
display: inline-block;
width: 310px;
padding: 20px;
}
#aHaMenu a {
text-decoration: none;
color: #000;
}
.img-svg {
width: 30px;
position: absolute;
margin-left: 70px;
margin-top: -38px;
fill: #1f83c4;
}
#newsAgent {
position: absolute;
margin-left: 120px;
margin-top: -31px;
font-weight: bolder;
}
#srch2 {
width: 19px;
position: absolute;
margin-left: 311px;
margin-top: -33px;
}
.srch3 {
position: absolute;
padding: 0 20px;
top: 8px;
right: 15px;
border: none;
border-radius: 20px;
height: 30px;
width: 220px;
background-color: #f3f3f3;
outline: none;
display: none;
}
}
//open burger
$(function() {
$('.c-hamburger').on('click', function() {
$(this).toggleClass('is-active');
$('#aHaMenu').slideToggle(400);
});
});
//swap svg to inline svg
$('img.img-svg').each(function(){
var $img = $(this);
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function(data) {
var $svg = $(data).find('svg');
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
$svg = $svg.removeAttr('xmlns:a');
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
}
$img.replaceWith($svg);
}, 'xml');
});
$(function() {
$('#srch2').on('click', function() {
$('.srch3').animate({width: 'toggle'});
});
$('.srch3').focusout(function() {
$(this).animate({width: 'toggle'});
});
});
Простой
