Не получается сделать адаптивное меню для телефона
Не получается сделать меню адаптивным под телефона, скину что примерно я пытаюсь сделать и что получается у меня, помогите пожалуйста
<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<
script src = "https://code.jquery.com/jquery-3.5.1.min.js" > < /script> <
script > window.jQuery || document.write('<script src="js/jquery-3.5.1.slim.min.js><\/script' > < /script> <
script type = "text/javascript"
src = "js/bootstrap.min.js" > < /script> <
script src = "slick/slick.js" > < /script>
<
script >
$(document).ready(function() {
var menuBtn = $('.top-nav_btn');
var menu = $('.top-nav_menu')
menuBtn.on('click', function(event) {
event.preventDefault();
menu.toggleClass('top-nav_menu__active');
});
}); <
/script>/* интегрируем переменные с цветами*/
@import url("colors.css");
@import url("fontello.css");
html {
font-size: 14px;
}
body {
background-color: var(--body-bg);
color: var(--text-color);
font-family: 'roboto', sans-serif;
padding: 0;
margin: 0;
}
.row {
padding: 0;
}
.container-fluid {
padding: 0;
margin: 0;
}
.top-nav_btn {
display: none;
width: 20px;
height: 20px;
background-color: transparent;
border: none;
font-size: 18px;
position: absolute;
right: 30px;
top: -80px;
}
.top-nav_btn ::hover {
cursor: pointer;
}
.top-nav {
background-image: url(../img/header-1440.svg);
position: relative;
background-size: 100%;
height: 104px;
background-repeat: no-repeat;
}
.logo-header_green {
position: relative;
margin: 21px;
width: 75px;
height: 75px;
}
.logo-footer_white {
width: 75px;
height: 75px;
}
.top-nav_menu {
list-style: none;
padding: 0;
display: flex;
position: relative;
}
.top-nav_menu a {
color: black;
}
.top-nav_menu li {
margin-right: 45px;
}
.top-nav_menu li a {
text-transform: uppercase;
text-decoration: none;
font-weight: 700
}
.top-nav_menu li a::after {
content: '';
width: 100%;
height: 3px;
background-color: var(--active-block);
display: block;
transform: translateY(42px) scale(0);
transition: all 0.2s;
}
.top-nav_menu li a:hover {
text-decoration: none;
}
.top-nav_menu li a:hover::after {
transform: translateY(42px) scale(1);
}
.top-nav_contact {
list-style: none;
padding: 0;
display: flex;
}
.top-nav_contact a {
margin-right: 45px;
color: var(--active-text-color);
}
/* закончили с меню*/
/*.section {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
width: 50vw;
}
.direction {
position: relative;
height: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
flex: 1;
}
.direction:hover {
flex: 1.8;
transition: flex 0.4s;
}
*/
.carousel-inner {
height: 400px;
}
.carousel-inner img {
transform: translateY(-30%);
width: 100%;
height: 100%;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
height: 100px;
width: 40px;
}
.news-title {
font-weight: 500;
line-height: 1.2;
}
.news {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: 0.25rem;
max-width: 411px;
margin-top: 35px;
}
.card-body {
height: 170px;
}
.news a {
text-decoration: none;
color: black;
}
.news img {
width: 100%;
height: 100%;
max-width: 412px;
max-height: 274px;
}
.content p {
text-align: justify;
}
.footer {
background-color: black;
padding: 40px 82px 49px 80px;
}
.footer a {
color: white;
text-decoration: none;
}
.footer a::hover {
color: blue;
}
.small {
display: block;
}
.footer-social-links li {
display: inline-block;
}
.footer-social-links li a {
display: inline-block;
width: 35px;
height: 35px;
background-color: #587ea4;
text-align: center;
border-radius: 50%;
line-height: 35px
}
.footer ul {
padding: 0;
list-style: none;
}
.oplata-links li {
display: inline-block;
}
span {
content: "\2192";
margin-left: 5px;
}
.button-link_footer {
padding: 30px 0 0 0;
}
.button-link_footer button {
padding: 0.975rem 0.95rem;
border-radius: 0;
}
.button-link_header button {
padding: 0.975rem 0.95rem;
border-radius: 0;
margin-bottom: 15px;
}
.footer p {
color: var(--active-text-color);
}
.footer small {
color: #cccccc;
}
.footer {
background-image: url(../img/footer-1440.svg);
position: relative;
height: 296px;
background-size: 100%;
background-repeat: no-repeat;
}
@media (max-width: 480px) {
.top-nav_btn {
display: block;
}
.top-nav_menu {
flex-direction: column;
display: none;
position: fixed;
right: 0;
left: 0;
transition: .5scubic-bezier(0, 1, .5, 1);
-webkit-transform: translateY(0);
transform: translateY(0);
z-index: 99999;
background-color: blue;
}
.top-nav_menu li {
line-height: 2;
}
.top-nav_menu li a::after {
display: none;
}
.top-nav_menu__active {
display: flex;
}
.carousel {
display: none;
}
.top-nav_menu {}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="./favicon.ico">
<title>Центр</title>
<!-- Bootstrap grid CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" href="/css/bootstrap-grid.min.css -->
<!-- fonts google roboto -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
</style>
<!-- slick slider -->
<link rel="stylesheet" href="slick/slick-theme.css">
<link rel="stylesheet" href="slick/slick.css">
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid p-0 m-0">
<!-- открываем контейнер -->
<div class="top-nav">
<div class="row justify-content-between align-items-center p-0 m-0">
<div class="col-md-3 p-0 m-0">
<div class="logo-header_green">
<img src="img/logo.svg" alt="Фирма">
</div>
</div>
<div class="col-md-4 p-0 m-0">
<button class="top-nav_btn">
<i class="icon-menu"></i>
</button>
<ul class="top-nav_menu">
<li><a href="#">О центре</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div class="col-md-auto">
<div class="button-link_header">
<button type="button" class="btn btn-outline-light">Регистрация <span>→</span></button>
</div>
</div>
<div class="col-md-auto p-0 m-0">
<ul class="top-nav_contact">
<a href="tel:+7000000000">+7 (000) 00 00 00</a>
</ul>
</div>
</div>
</div>
<div class="row p-0 m-0">
<div class="col-md p-0 m-0">
<div class="content">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/1.jpg" alt="Первый слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/3.jpg" alt="Второй слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/3.jpg" alt="Третий слайд">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="news-item">
<div class="row justify-content-md-center p-0 m-0">
<div class="col-md-6 col-xl-3 p-0 m-0">
<div class="news">
<!-- Содержимое карточки -->
<!-- Изображение -->
<img class="news-img-top " src="img/3.jpg" alt="...">
<!-- Текстовый контент -->
<div class="card-body">
<h4 class="card-title">Заголовок карточки</h4>
<h6 class="card-subtitle mb-2 text-muted">Подзаголовок карточки</h6>
<p class="card-text">Некоторый текст...</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 p-0 m-0">
<div class="news">
<!-- Содержимое карточки -->
<!-- Изображение -->
<img class="news-img-top" src="img/3.jpg" alt="...">
<!-- Текстовый контент -->
<div class="card-body">
<h4 class="news-title">Заголовок карточки</h4>
<h6 class="card-subtitle mb-2 text-muted">Подзаголовок карточки</h6>
<p class="card-text">Некоторый текст.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 p-0 m-0">
<div class="news">
<a href="#">
<!-- Содержимое карточки -->
<!-- Изображение -->
<img class="news-img-top" src="img/3.jpg" alt="...">
<!-- Текстовый контент -->
<div class="card-body">
<h4 class="news-title">Заголовок карточки</h4>
<h6 class="card-subtitle mb-2 text-muted">Подзаголовок карточки</h6>
<p class="card-text">Некоторый текстaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="row justify-content-md-center">
<div class="col-md-auto">
<h1>Гай Ю́лий Це́зарь</h1>
<p>Происходивший из древней патрицианской семьи, Цезарь последовательно добивался всех ординарных римских должностей (cursus honorum) и сделал себе имя на борьбе с консервативными сенаторами (оптиматами). В 60 году до н. э. организовал первый
триумвират с двумя влиятельными политиками — Гнеем Помпеем Великим и Марком Лицинием Крассом. С 58 года до н. э. более восьми лет провёл на территории современных Швейцарии, Франции, Бельгии, Германии и Великобритании в Галльской войне,
присоединив к Римской республике огромную территорию от Атлантического океана до Рейна и снискав славу талантливого полководца. В начале 49 года до н. э. начал гражданскую войну из-за непримиримых разногласий с сенаторами по вопросам о деталях
своего возвращения в Рим и о гарантиях судебной неприкосновенности за должностные преступления (подкупы на выборах, взятки должностным лицам, нарушение договоров, насильственные действия и другие нарушения). </p>
<p>За четыре года сторонники сената, сгруппировавшиеся вокруг Помпея, были разбиты Цезарем в Италии, Испании (дважды), Греции и Африке, также им были разбиты войска правителей Египта и Понта.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- закрываем контейнер header -->
<footer class="footer">
<div class="container-fluid m-0 p-0">
<div class="row justify-content-between p-0 m-0">
<div class="col-md m-0 p-0">
<div class="logo-footer_white 1">
<img src="img/logo.svg" alt="Фирма">
</div>
<div class="button-link_footer">
<button type="button" class="btn btn-outline-light">Регистрация <span>→</span></button>
</div>
</div>
<div class="col-md m-0 p-0">
<div class="footer-contact">
<ul class="footer-nav_contact">
<a href="#">+7 (000) 00 00 00</a>
</ul>
<small>по всем вопросам</small>
<p class="footer-email">@mail</p>
</div>
<div class="footer-social-links">
<ul>
<li><a href="#"><i class="icon-vkontakte"></i></a></li>
</ul>
</div>
</div>
<div class="col-md m-0 p-0">
<div class="footer-adress">
<p>ул. Зои 111</p>
</div>
</div>
<div class="col-md m-0 p-0">
<ul class="footer-adress">
<div class="footer-nav_contact">
<li><a href="#">Контакты</a></li>
<li><a href="#">Оплата</a></li>
<li><a href="#">Публичная оферта</a></li>
</div>
<div class="oplata-links">
<li>
<a href="#"><img src="img/oplata/visa.svg" alt="visa"></a>
</li>
<li>
<a href="#"><img src="img/oplata/mastercard.svg" alt="Вконтакте"></a>
</li>
<li>
<a href="#"><img src="img/oplata/mir.svg" alt="mir-pay"></a>
</li>
<li>
<a href="#"><img class="tinkoff" src="img/oplata/tinkoff.svg" alt="Tinkoff"></a>
</li>
</div>
</ul>
</div>
</div>
</div>
</footer>