Creating and Styling WordPress Menus in Pinegrow: An Overview

Today, let’s take a look at how WordPress menus work inside the Pinegrow web editor. Because, like everything else, it’s a little different than what you’re probably used to.

Let’s start by taking a look at where we’re coming from and where we’re going. Right, here we’re inside the Pinegrow web editor. This is the plugin version for WordPress, but the desktop works just the same. You can see on the top, we’ve got a menu already defined. If we flip over to the preview of the site, you’ll see that these menu items are a little bit different than what we have inside the web editor. That’s because it’s replacing what’s in Pinegrow with the menus that are inside WordPress. Let’s see how we do that.

Back inside Pinegrow, I’m going to select our menu. And we have over here, If we look at the tree view, we’ve got an unordered list with a bunch of list items for each of the menu items. And then inside of there, is an anchor. This is the basic structure of a menu, and most menus work this way.

I’m going to come up here to the unordered list, which is sort of the wrapper for the menu. And over here, we have this WordPress action defined. And inside this smart action, we’re pointing to the location of “Primary.” This is telling WordPress which menu inside of the WordPress CMS to use to replace the items that we have defined here. If we want to create a new location, all you have to do is tick this checkbox, type in a description, and it’ll create that for us when we publish the theme or block. If we have multiple levels of the menu, not just a top level, we can select this multi-level option. And here, we would select the element that has the top-level menu with a dropdown defined. This project doesn’t have a dropdown, and I’ll cover those in a separate video.

For each of these items, we have it styled. In this project, we’re using Tailwind, so it’s pretty easy to read what the styling is on all of them. We’ve got a margin-right of 12 for the list item, and for this anchor, we’re defining the font weight, the font color, and the hover text color. And that’s really all we need. When we save this project and export it as a theme. We can come over to the front end. And you can see that each of these items is styled the same way that we have it styled inside of WordPress.

We can use the Customize function to look at our menus. And these are different menus that I have defined inside of the CMS. You’ve got this main menu which is the one that we’re viewing here. And you can see that it’s replaced that primary menu location that was in there before with the new Flex Menu location.

This is all well and good for a desktop menu, but now what do we do about mobile menus?

This is one of those things that most themes and WordPress plugins are going to do for you automatically, but again, inside of Pinegrow, we have the flexibility to create it however we want. There are two ways that I see mobile menus implemented a lot of times. One is where we have a single menu, and we change the way that it’s shown on a mobile device. The other is where we hide this menu, and we show a completely different one, usually in a slide-out when we’re on a mobile device. That’s how we’ve done it here.

So by selecting the unordered list, which is at the top of the menu, you can see that we’ve applied a hidden class to it. And because we’re using mobile-first coding, that means that everything all

the way up until we get to the extra large size is going to be hidden. Once it hits the extra large break point. Then it turns into a display flex and the justify center. You can see that right here. Our extra large breakpoint has our full menu, but our mobile breakpoint doesn’t. Instead, it shows the button, and it shows a fly-out with the menu defined.

Let’s select that button so we can see what it looks like in the tree view. And we’ve got our button here. And we have an interaction defined so that when we click on it, it’ll do a little animation for us.

This animation changes the way the button looks, and it removes the hidden class on our fly-out. Let’s play the animation, and I’ll show you what it looks like…There it is.

If we select our Nav Menu, we’ve got another interaction set so that when we click on the close button, it closes all of this. And then we’ll drill down…To another menu just like the one we have for the desktop. Only this one is styled differently for mobile devices.

This is one of those cases where it’s a little more work to set it up in the front end. But Pinegrow gives you so much more flexibility and power to make them look and work the way they want them to in the end.

I have a few more videos coming up in the next few weeks that are going to show us things in a little bit more detail. We’ll cover drop-downs, menu styling, and also menu accessibility.

If you have any questions about Pinegrow or how we use it, don’t hesitate to reach out to me. And as always, if you found this video helpful, please give me a thumbs up, leave a comment, and subscribe to the channel.