WordPress actions Nav Menu Troubleshoot

Pinegrow WP
1

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>
2

@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.

3

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

4

Thanks for posting that article. I’;m currently tackling integrating WP Menus in a WP theme with Pinegrow as a a learning objective. Having been able to find much on this from Pinegrow.
BTW, I love how this article starts off with this huge understatement:

By default, WordPress outputs menus using its own HTML markup that would most likely clash with markup and styling of our page.

… Okay, it’s not that bad but ya, they seem tricky to me. I think maybe I’ll try to find another tutorial on the Starter Theme 2. but definitely could use some walk through of at least some of my choices I could make in the nav area and how this can effect a web app in both function and form.
And hey, its a starter theme. I could always just start over if I screwed something up.