Navigation

Hi. I’m going to demonstrate how to add a navigation menu to an internal page in our 42 theme.

So as you can see we’re looking at the back end, the editing interface, of a WordPress site. We’ve got a page here with a header, some breadcrumbs, some content, but there’s no navigation menu to get around the rest of the site here so we’re going to add one.

This consists of a couple of different steps. The first is to add a two column structure at the top, then to place a navigation block in the left column, to configure that block and those columns. And then last we’ll move some content around.

So we’re going to start by clicking around here so that we can add a block beneath the breadcrumbs. This is going to be columns.

Whoops I’ve got columns available there; I’m just going to drop that in. We’re going to select the 2 column, 33/66 split here, which gives us a smaller left column. Then in this column we’re going to add a navigation block. Again, I’ve used this recently. So it’s going to just drop a default block in; we’re going to change this in a second.

As you can see over here in list view, navigation is selected so if I shoot across the page to “Menu” and the three-dot menu, I can select which subnavigation I want to appear here.

I happen to know that the one I need here is the academics section subnav. I’ve already created that elsewhere. So we’re all set there.

And then you can see things are are not really aligned over to the left hand side like we want, so with navigation selected, if you click this gear you can look at the settings. You see here right now the menu is set up to be oriented horizontally. We want it to be vertical, so we switch it over to vertical and everything aligns as it should. So that is part of that task.

And then we want to go back and select the columns – so the the larger structure that includes both columns and the navigation – and you can see by this dotted line here we’ve got some content that would be overlapping. That’s because this needs to be set at wide width. So set alignment to wide width. It sometimes will toggle backwards if you’re already there.

Okay, so that’s all set, and if we were to go look at the front end now we would see this long navigation column on the left and a big white space on the right. So we want to now move some of this content up into that space.

I’m just going to arbitrarily select a decent sized chunk of it and I’m going to move it from over here in the list view. This is the easiest place to drag things around. So I’ve got this whole block and I’m going to move it up into the column, and you can tell it landed inside the column because we got this little open-close. So that moved up, it looks like maybe a little too much in that space.

So I’m going to grab the last maybe just the list, maybe the last paragraph in the list, and drag those back out so that they fit a little better. We’ll update and go take a peek and you can see that we’ve got our navigation now and we’ve got our content kind of wrapping around it