The next thing we’re going to do is configure the menu. Let’s begin by taking a look at this menu. Most of these menu items are actually links further down the page.
For example, if we come over to hypnotherapy treatments and click on it, it brings us down to what problems can hypnosis help. The way that works is the same way this top of page works. If we assign this heading an ID, then we can use the menu to click down to that. So that is what we’re going to do.
Create the Menu
Come over to appearance and menus. We are going to create a new menu and the name is going to be Main Sidebar Menu.
We’re going to move clinic locations over there. We’re going to move the homepage over there and that’s it. Move home page up and change that to Home and then Clinic Locations will leave as Clinic Locations. Everything else is a custom link.
Create Custom Links
Let’s take a look at our custom links. The first one is “how can hypnotherapy help you”. If we click on that it takes us to this “How can hypnotherapy help you” section.
So what we need to do is give this an ID and then make the link to that ID. To make that work let’s come back over to the homepage here and edit this page. Scroll down to “How can hypnotherapy help you”.
Let’s look at this in text view. And we’re going to add an ID to that. That’s h2 id=”hypnotherapy-help”. And that’s our ID. So in our custom link our URL is going to be that and then pound sign, that’s the ID. So pound sign and then hypnotherapy-help #hynotherapy-help.
Then the text will be “How can Hypnotherapy help you”. I’ll add that one to the menu and that’s directly below home but not a sub of home.
The next one is hypnotherapy treatments and that’s under “What problems can hypnosis help”? So we’ll come down here looking for the h2. I will give it an ID of h2 id=”treatments”. We’ll come down to this one here, an id of treatments. Her exact label is this here and apply it to that rather than to the menu. Save the menu.
The next one is another custom link. The pound sign and that one is about Annie Greig. We don’t have a place for that yet. We’re going to give it an id of annie-greig, but it doesn’t actually exist yet until we create it next week. So we have to remember to come back to that. We’ll add it to the menu knowing that today it doesn’t go anywhere.
And then”What is Hypnotherapy and Hypnosis”? We’ll say h2 id=”hypnotherapy”. Add that one to the menu. But it’s not above, it’s below Annie.
The next one is “What happens in Hypnotherapy”? That’ll be h2 id=”what-happens”. Let’s just update this, #what-happens, add it to the menu and save the menu again.
We’ve got one more custom link, pound sign and then h2 id=”cbh-treatments”.
Then she’s got a mail to link on one of these. Go to mailto link here and we’re going to copy the link. Let’s just go down and find her mailto. Copy that mailto link, come back over here and we’ll add one more custom link and contact by email.
Now we can save the menu. We are not going to worry about formatting this menu today or even moving it so it’s going to be in the wrong location.
Oh, we’re missing the label here, so I’m going to use these page separators instead for that. So if we add our page, come down here to id= and I’m going to take this id=”hypnotherapy-help” out of it. Then add it to the paragraph tag above instead.
Then we’ll do the same thing here with that paragraph tag and then this h2. We’ll put it with this paragraph tag above and then the same thing again x with a paragraph tag above. It’s useful for us to have all these paragraph tags here. I think that’s good.
Let’s see how that works. There it is. So we set our anchors to a different position. Clinic locations takes us over the clinic locations, mailto brings up your mail link. It’s just a standard mailto link inside of our thing here.
We’ll end up moving the menu over to the side, styling it and making sure that it works properly. We have some styling to do using CSS but for now we’ve got our menu moved over and next we are going to configure widgets.