Не отображается текст после открытия бургера django

вот html

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MyCompany</title>
    <link rel="stylesheet" href="{% static 'main/css/main.css' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
</head>
<body>
    <div class="header">
      <a href="#default" class="logo">ЛоготипКомпании</a>
          <div class="topnav" id="myTopnav">
            <a href="#">Главная</a>
            <a href="#">Контакты</a>
            <a href="#">О нас</a>
            <a href="#" id="menu" class="icon">&#9776</a>
          </div>
    </div>
    <script src="{% static 'main/js/main.js' %}"></script>
</body>
</html>

после нажатия бургера добавляется responsive но ссылки в нем не отображаются

введите сюда описание изображения

введите сюда описание изображения

вот css:

*{
    padding: 0;
    margin: 0;

}

.header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
}

.logo {
    font-size: 25px;
    font-weight: bold;
    text-decoration: none;
}

.topnav a{
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}


.topnav {
  float: right;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon{
    display: none;
}

@media screen and (max-width: 1010px) {
    .topnav a {
    display: none
    }
    .topnav a.icon{
    float:right;
    display:block;
    font-size: 25px;
    }
    .topnav responsive{
        position: relative;
    }

    .header .topnav.responsive{
        height: 340px;
    }

    .topnav responsive a.icon{
        position: absolute;

    }

    .topnav responsive a{
        float:none;
        display: block;
        text-align:left;
    }
}

вот js:

menu.onclick = function myFunction() {
    var x = document.getElementById('myTopnav')

    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav"
    }
}

помогите пожалуйста

Вернуться на верх