Editing the top menu

Published: 23rd August 2017

This guide explains what you are looking at and the process of editing the top menu to add new items, and change crossed out menu items to working links.  This guide requires you to have notepad++ and the FireFTP add-on for Firefox on your computer.  If you do not have this, please speak to stephen.robertshaw@manchester.ac.uk to get set up with these programs.

First off we need to understand what we are looking at when editing the top menu template within notepad++ (click to open full size in a new tab).

  • html uses tags to control the contents of the web page. Tags come in pairs, so there is always an opening tag (such as <p>) and closing tag (in this example the closing tag is </p>) and they are displayed in blue within Notepad++.
  • Notepad++ will always highlight the background in purple of the other tag in the pair – in this screen shot the <div> tag is highlighted (line 13) and the closing </div> tag on line 36 is highlighted.  This makes it easier to see whether everything is as it should be.
  • Some tags have attributes that sit within the opening tag and an attribute has a name (in red text), an = sign and then the value within inverted commas (in purple text).
  • The black text on the screen is the text that you actually read on the website.

In order to change the crossed out menu items into working links we need to change the <span> tags to <a> tags (including the href attribute).

Adding new items is simply a case of understanding how the code constructs the menu, and what each level of menu looks like in the code.  You can then copy existing code and edit it so that the text and links are correct.

Below is a guide on how to do both of these things.

Step 1

Editing existing tags to remove the strikethrough and create a clickable link

First we need to find the open the menu file in notepad++ and find the line we want to change.  Press ctrl + f to open the find dialogue and search for the text that is crossed out in the menu.  In this example we will look for the nicknames link.  Notepad++ will highlight it in green.  You will see that the text has <span> </span> tags around it.

Step 2

We now need to change the opening <span> tag so that it is an <a> tag with the href attribute that contains the link.  Change the opening <span> tag to read <a href=””>

Step 3

Next we need to get the URL of the guide we are going link to.  To do this go the admin dashboard and then click on posts.  Find the post you want to link to and click view.

Step 4

Copy the URL from the address bar.

Step 5

Paste the URL between the 2 inverted commas in notepad++.

Step 6

Change the closing </span> tag to </a> and then save the file (ctrl+s)

Step 7

Finally we need to upload the amended file to the web server.  Open FireFTP and connect.  Find the file in the left hand side of the window (local computer) and drag it across to the right hand side (web server).  It will ask you whether you want to overwrite the existing file or skip.  Select ‘overwrite’ and you are done.  Refresh the web page to view the changes.

NOTE: In the small chance that the change doesn’t appear, you may need to hold ctrl and then refresh the page to clear any cached versions of the page.