I’m trying to display the menu in the custom template of wordpress, i used to display the menu this code :
<code> <!-- Headerbar End -->
@if (has_nav_menu('primary_navigation'))
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5">
<a href="index.html" class="navbar-brand d-flex align-items-center">
<h1 class="m-0">{!! $siteName !!}</h1>
</a>
<button type="button" class="navbar-toggler me-0" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto p-4 p-lg-0">
{!! wp_nav_menu(['theme_location' => 'primary_navigation','container' => 'div','container_class' => 'menu-header-container', 'menu_class' => 'nav', 'echo' => false]) !!}
<!-- Search Bar -->
<div class="position-relative search-bar">
<input class="form-control bg-transparent w-100 py-3 ps-4 pe-5 " type="text" placeholder="Search ...">
<button type="button" class="btn btn-secondary py-2 position-absolute top-0 end-0 mt-2 me-2"><i class="fa fa-search"></i></button>
</div>
</div>
<!-- Search icon -->
<div class="border-start ps-4 d-none d-lg-block">
<button type="button" class="btn btn-sm p-0 toggle-search"><i class="fa fa-search"></i></button>
</div>
</div>
</nav>
@endif
</code>
<code> <!-- Headerbar End -->
@if (has_nav_menu('primary_navigation'))
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5">
<a href="index.html" class="navbar-brand d-flex align-items-center">
<h1 class="m-0">{!! $siteName !!}</h1>
</a>
<button type="button" class="navbar-toggler me-0" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto p-4 p-lg-0">
{!! wp_nav_menu(['theme_location' => 'primary_navigation','container' => 'div','container_class' => 'menu-header-container', 'menu_class' => 'nav', 'echo' => false]) !!}
<!-- Search Bar -->
<div class="position-relative search-bar">
<input class="form-control bg-transparent w-100 py-3 ps-4 pe-5 " type="text" placeholder="Search ...">
<button type="button" class="btn btn-secondary py-2 position-absolute top-0 end-0 mt-2 me-2"><i class="fa fa-search"></i></button>
</div>
</div>
<!-- Search icon -->
<div class="border-start ps-4 d-none d-lg-block">
<button type="button" class="btn btn-sm p-0 toggle-search"><i class="fa fa-search"></i></button>
</div>
</div>
</nav>
@endif
</code>
<!-- Headerbar End -->
@if (has_nav_menu('primary_navigation'))
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5">
<a href="index.html" class="navbar-brand d-flex align-items-center">
<h1 class="m-0">{!! $siteName !!}</h1>
</a>
<button type="button" class="navbar-toggler me-0" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto p-4 p-lg-0">
{!! wp_nav_menu(['theme_location' => 'primary_navigation','container' => 'div','container_class' => 'menu-header-container', 'menu_class' => 'nav', 'echo' => false]) !!}
<!-- Search Bar -->
<div class="position-relative search-bar">
<input class="form-control bg-transparent w-100 py-3 ps-4 pe-5 " type="text" placeholder="Search ...">
<button type="button" class="btn btn-secondary py-2 position-absolute top-0 end-0 mt-2 me-2"><i class="fa fa-search"></i></button>
</div>
</div>
<!-- Search icon -->
<div class="border-start ps-4 d-none d-lg-block">
<button type="button" class="btn btn-sm p-0 toggle-search"><i class="fa fa-search"></i></button>
</div>
</div>
</nav>
@endif
the menu is successfly displayed, but i encountred a problem that is when i’m trying to add pages to a dropdown menu, i discovred the menu doesnt work well as in the picture : https://imgur.com/a/L5nP5ZO
i discovered that the wp_nav_menu function is working with the
<code>
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5">
<a href="index.html" class="navbar-brand d-flex align-items-center">
<h1 class="m-0">Title</h1>
</a>
<button type="button" class="navbar-toggler me-0" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto p-4 p-lg-0">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Services</a>
<a href="product.html" class="nav-item nav-link">Products</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
<div class="dropdown-menu bg-light m-0">
<a href="gallery.html" class="dropdown-item">Gallery</a>
<a href="feature.html" class="dropdown-item">Features</a>
<a href="team.html" class="dropdown-item">Our Team</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
<!-- Search Bar -->
<div class="position-relative w-100 search-bar" style="margin-top: 10px;">
<input class="form-control bg-transparent w-100 py-3 ps-4 pe-5 " type="text" placeholder="Search ...">
<button type="button" class="btn btn-secondary py-2 position-absolute top-0 end-0 mt-2 me-2"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="border-start ps-4 d-none d-lg-block">
<button type="button" class="btn btn-sm p-0 toggle-search"><i class="fa fa-search"></i></button>
</div>
</div>
</nav>
</code>
<code>
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5">
<a href="index.html" class="navbar-brand d-flex align-items-center">
<h1 class="m-0">Title</h1>
</a>
<button type="button" class="navbar-toggler me-0" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto p-4 p-lg-0">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Services</a>
<a href="product.html" class="nav-item nav-link">Products</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
<div class="dropdown-menu bg-light m-0">
<a href="gallery.html" class="dropdown-item">Gallery</a>
<a href="feature.html" class="dropdown-item">Features</a>
<a href="team.html" class="dropdown-item">Our Team</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
<!-- Search Bar -->
<div class="position-relative w-100 search-bar" style="margin-top: 10px;">
<input class="form-control bg-transparent w-100 py-3 ps-4 pe-5 " type="text" placeholder="Search ...">
<button type="button" class="btn btn-secondary py-2 position-absolute top-0 end-0 mt-2 me-2"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="border-start ps-4 d-none d-lg-block">
<button type="button" class="btn btn-sm p-0 toggle-search"><i class="fa fa-search"></i></button>
</div>
</div>
</nav>
</code>
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5">
<a href="index.html" class="navbar-brand d-flex align-items-center">
<h1 class="m-0">Title</h1>
</a>
<button type="button" class="navbar-toggler me-0" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto p-4 p-lg-0">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Services</a>
<a href="product.html" class="nav-item nav-link">Products</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
<div class="dropdown-menu bg-light m-0">
<a href="gallery.html" class="dropdown-item">Gallery</a>
<a href="feature.html" class="dropdown-item">Features</a>
<a href="team.html" class="dropdown-item">Our Team</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
<!-- Search Bar -->
<div class="position-relative w-100 search-bar" style="margin-top: 10px;">
<input class="form-control bg-transparent w-100 py-3 ps-4 pe-5 " type="text" placeholder="Search ...">
<button type="button" class="btn btn-secondary py-2 position-absolute top-0 end-0 mt-2 me-2"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="border-start ps-4 d-none d-lg-block">
<button type="button" class="btn btn-sm p-0 toggle-search"><i class="fa fa-search"></i></button>
</div>
</div>
</nav>
**PLEASE NOTE! THAT I’M USING BEDROCK AND SAGE **
i thought the wp_nav_menu function is working with the same structure.