WordPress actions Nav Menu Troubleshoot

Hello!

First time posting here so hoping someone can help me. I’m trying to use the WordPress actions to convert a navigation menu into a WordPress version. I’ve tried all the different settings and variations I can think of. Either the menu just completely doesn’t work, or it works but gets messed up.

Is anyone able to tell me what settings I’d need to apply to the below menu and which element to apply them on?

<div class="site-navbar-wrap">
            <div class="site-navbar site-navbar-target js-sticky-header" data-pgc-define="main.menu" data-pgc-define-name="Main Menu">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-2">
                            <h1 class="my-0 site-logo"><a href="index.html"><img src="/images/logo.png"/></a></h1>
                        </div>
                        <div class="col-10">
                            <nav class="site-navigation text-right" role="navigation">
                                <div class="container">
                                    <div class="d-inline-block d-lg-none ml-md-0 mr-auto py-3">
                                        <a href="#" class="site-menu-toggle js-menu-toggle text-white"><span class="icon-menu h3"></span></a>
                                    </div>
                                    <ul class="site-menu main-menu js-clone-nav d-none d-lg-block">
                                        <li class="active">
                                            <a href="#home-section" class="nav-link">Home</a>
                                        </li>
                                        <li>
                                            <a href="#classes-section" class="nav-link">Classes</a>
                                        </li>
                                        <li class="has-children">
                                            <a href="#" class="nav-link">Pages</a>
                                            <ul class="dropdown arrow-top">
                                                <li>
                                                    <a href="#" class="nav-link">Team</a>
                                                </li>
                                                <li>
                                                    <a href="#" class="nav-link">Pricing</a>
                                                </li>
                                                <li>
                                                    <a href="#" class="nav-link">FAQ</a>
                                                </li>
                                                <li class="has-children">
                                                    <a href="#">More Links</a>
                                                    <ul class="dropdown">
                                                        <li>
                                                            <a href="#">Menu One</a>
                                                        </li>
                                                        <li>
                                                            <a href="#">Menu Two</a>
                                                        </li>
                                                        <li>
                                                            <a href="#">Menu Three</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#about-section" class="nav-link">About</a>
                                        </li>
                                        <li>
                                            <a href="#events-section" class="nav-link">Events</a>
                                        </li>
                                        <li>
                                            <a href="#gallery-section" class="nav-link">Gallery</a>
                                        </li>
                                        <li>
                                            <a href="#contact-section" class="nav-link">Contact</a>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

@Danderton Welcome to the forums, I see this is your first time posting. The menu is built in the Wordpress backend not in Pinegrow. Have a look at this article and hopefully it will explain things:

If you’ve any other questions about it reply here and someone will help you out.

Hi @Danderton,
Here is a tutorial using Bootstrap 4 that may also help a bit. Adding multiple levels of submenus to a Bootstrap 4 navigation bar in your WordPress theme | Pinegrow Web Editor
Cheers,
Bob