Как сделать так, чтобы система навигации WordPress выглядела так?

Question

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

<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_class' => "navbar-nav" ) );?>

Вот кастом HTML и CSS.

<div id="sidenav">

    <div class="navbar-nav flex-column">

        <a href="#" class="nav-item nav-link">Home<span class="sr-only"></span></a>

            <div id="sidenav-accordion" data-children=".collapse-container">

            <div class="nav-item collapse-container">

            <a href="#" class="nav-link custom-toggler" data-toggle="collapse" aria-controls="grantsDropdown" aria-expanded="false" data-target="#grantsDropdown" data-parent="#sidenav-accordion">Chapter 1</a>

                <div class="collapse custom-dropdown" id="grantsDropdown">

                <a href="#" class="dropdown-link">Text<span class="dropdown-number"></span></a>
                <a href="#" class="dropdown-link">Text<span class="dropdown-number"></span></a>
                <a href="#" class="dropdown-link">Text<span class="dropdown-number"></span></a>
                <a href="#" class="dropdown-link">Text<span class="dropdown-number"></span></a>
                <a href="#" class="dropdown-link">Text<span class="dropdown-number"></span></a>
                <a href="#" class="dropdown-link">Text<span class="dropdown-number"></span></a>

                </div>

            <a href="#" class="nav-item nav-link">Chapter 2<span class="sr-only"></span></a>
            <a href="#" class="nav-item nav-link">Chapter 3<span class="sr-only"></span></a>
            <a href="#" class="nav-item nav-link">Chapter 4<span class="sr-only"></span></a>
            <a href="#" class="nav-item nav-link">Chapter 5<span class="sr-only"></span></a>
            <a href="#" class="nav-item nav-link">Chapter 6<span class="sr-only"></span></a>
            <a href="#" class="nav-item nav-link">Chapter 7<span class="sr-only"></span></a>

            </div>

            </div>

    </div>

</div>

Наряду с бутстрапами, вот кастом CSS.

nav.side-nav {padding:0;height:100%;position:fixed;max-width:inherit}

nav.side-nav .logo {height:7rem}

nav.side-nav .navbar-nav {width:100%}

nav.side-nav .navbar-nav .nav-link {padding:2rem 1rem;color:#fff;font-weight:700;border-bottom:1px solid #526173;width:100%;}

nav.side-nav .navbar-nav .nav-link.active,nav.side-nav .navbar-nav .nav-link:active,nav.side-nav .navbar-nav .nav-link:focus,nav.side-nav .navbar-nav .nav-link:hover {background-color:#1b2125;transition:all .1s ease-in-out;width:100%;}

nav.side-nav .custom-toggler[aria-expanded=true]{background:#1b2125}

nav.side-nav .custom-dropdown{background:#1b2125;transition:opacity .2s ease-in-out;transform:scale(1)}

nav.side-nav .custom-dropdown.show{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap}

nav.side-nav .custom-dropdown .dropdown-link{display:-ms-flexbox;display:flex;padding:.5rem 2rem;color:#fff;font-weight:700;border-bottom:1px solid #526173}

nav.side-nav .custom-dropdown .dropdown-link.active,nav.side-nav .custom-dropdown .dropdown-link:active,nav.side-nav .custom-dropdown .dropdown-link:focus,nav.side-nav .custom-dropdown .dropdown-link:hover{text-decoration:none;background:#95c900}

Answer 1

Если вам нужна пользовательская структура HTML для вашей навигации, вы должны использовать ходунки.

wp_nav_menu([
    'theme_location' => 'primary',
    'walker'         => new NavWalker(),
]);

Я использую для bootstrap навигации это: https://github.com/wp-bootstrap/wp-bootstrap-navwalker