Creating navigation menu with overlaid images

Hi @loganwilkerson

I visited both websites and it seems you have a similar structure but missing some pages.

First, you need to have all pages created in the Pages section on the left. Here is a screenshot where I made three sample pages. There is no need to have them in the order desired; just make sure you have all the pages you want to display.

Once you have all pages, you need to create a Menu that gathers all those pages. Go to Appearance -> Menu on the left sidebar and then in Menu Structure you need to set a name. I made a sample and called it Main navigation. Check if the theme you’re using allows to set the menu’s position. In my case, in Menu settings I selected the Desktop horizontal menu. Then, click on Save menu.

Now that you’ve created the menu, you need to move all pages into it. For that, select all pages you want in the Add menu items and then click on Add to menu. You should see something like this.

Finally, you can change the order by dragging and dropping each item. Here is a video of how I am doing it. Remember to Save menu once you’re done.

And that’s it! I hope this was useful.
Let me know if it works.
Good luck

Set each menu item’s CSS background property to be an image of a blank sign board. I suggest using PNG or GIF format so the area of the image that is not actually the sign is transparent. Each menu item ought to be the same width so one image works for all items. Also set a background color property that will be visible through the transparent parts of the image.

It may seem like including this color as part of the image instead of being transparent would work just as well. It might, but the transparent approach will work more reliably. Specify all of this in a CSS declaration added to the Additional CSS customizer section. CSS similar to:

nav .menu-item {
    background-image: url("https://full.url/to/image/file.png");
    background-color: burlywood;
    width: 8rem;
}