Блог

я пытаюсь создать заголовок, который на ПК является обычной навигацией, А на меньшем устройстве (например, телефоне и т. Д.) Становится навигатором для бургеров. теперь навигатор burger работает (нужно только сделать так, чтобы всякий раз, когда я подключаюсь к меньшему устройству, оно отображалось, а другое получало d-none)

теперь проблема с моей обычной навигацией, всякий раз, когда я пытаюсь выровнять содержимое между ними, чтобы ссылки распределялись равномерно, это просто не работает, и я получаю отображение блока по умолчанию

вот код, который нуждается в исправлении:

 <div class="header">
        <nav class="navbar navbar-light">
            <div class="burger-nav d-none">
                <a class="navbar-brand" href="#">
                    <h1 id="logo"><span class="h1yellow">Crypto</span><span class="h1white">Mania</span></h1>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Login<span class="sr-only">(current)</span></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="normal-nav d-flex justify-content-between"> <!-- this part doesnt work -->
                <ul class="navbar-nav">
                    <li class="nav-item active ">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <h1 id="logo"><span class="h1yellow">Crypto</span><span class="h1white">Mania</span></h1>
                    </li>
                    <li class="nav-item active ">
                        <a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
  

это вся навигация, но я добавил небольшой комментарий, в чем проблема. Если кто-нибудь что-нибудь увидит, пожалуйста, дайте мне знать.

 <div class="header">
        <nav class="navbar-light">
            <div class="burger-nav d-none">
                <a class="navbar-brand" href="#">
                    <h1 id="logo"><span class="h1yellow">Crypto</span><span class="h1white">Mania</span></h1>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Login<span class="sr-only">(current)</span></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="I removed this classes "> <!-- this part doesnt work -->
                <ul class="d-flex justify-content-between">
                    <li class="nav-item active ">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <h1 id="logo"><span class="h1yellow">Crypto</span><span class="h1white">Mania</span></h1>
                    </li>
                    <li class="nav-item active ">
                        <a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
  

Попробуйте этот код, пожалуйста.