DoOO Navigation: Menus & Icons

You may want to customize the navigation available on your Domain of One's Own homepage. This article will show you how to edit and customize your menus, and change the icon elements for different pages.

Customizing Menus

Editing_Homepage_Menu_1.png

To add/edit/remove items from your Domain of One’s Own homepage menu, follow the steps below:

  1. Log in as an administrator to your DoOO WP instance. This will likely be at yourproject.edu/wp-login.php?wp.
  2. Navigate to the main WordPress dashboard, and click Appearance > Menus.
    Editing_Homepage_Menu_2.png
  3. Click create a new menu.
    Editing_Homepage_Menu_3.png
  4. Give your new menu a name. Click Create Menu.
    Editing_Homepage_Menu_4.png
  5. Check the boxes next to Dashboard and Homepage to pull these necessary items to your new menu. If you have a Request Form, you’ll want to check that box as well. Click Add to Menu.
    Editing_Homepage_Menu_5.png
  6. If you’re adding a page that you’ve created within your DoOO WP instance, click the View All tab under the Pages drop-down to see a list of all created pages. If you’re adding a custom link (i.e. a webpage outside your DoOO WP instance) click the drop-down next to Custom Links in the lefthand menu.
    Editing_Homepage_Menu_6.png
    Here we have a separate WordPress install for State University Documentation, so we’ll link that as a custom link. Add the URL in the first field shown above, and the public-facing menu text in the second field. Click Add to Menu.
  7. Drag and Drop menu items under the Menu Structure section to change the order in which they appear. Check Main Menu box under Display Location. When you’re ready, click Save.
    Editing_Homepage_Menu_7.png
    Navigate back to the DoOO Homepage. You should now see your new menu:
    Editing_Homepage_Menu_8.png

Customizing Icon Element Boxes

This section will show you how to change the colors, texts and fonts of your homepage's icon element boxes, as well as how to add and remove them.

"Icon element boxes" refers to the outlined boxes below:

Icon_Element_Boxes_1.png

Editing Icons, Colors, Texts and Fonts

There are two ways to access the editor for this feature. You’re going to want to edit your Homepage. You can get there by going here:

Icon_Element_Boxes_2.png

…or by going here:

Icon_Element_Boxes_3.png

Once you’re in the editor, you’ll notice that as you begin to hover your mouse over certain areas, menu items will appear. You’ll want to hover over the icon box and click the innermost button on the right. It looks like a square with a pencil:

Icon_Element_Boxes_4.png

Here’s where the magic happens. Under the content tab you’ll be able to change the following:

  • where/how the icon is displayed
  • what icon you want to display (scroll for more icon options)
  • the title of the icon box
  • the text of the icon box

A preview of all the changes you make will appear in the top right-hand corner of the viewer. When you’re finished, either go to the colors tab or click save.

Icon_Element_Boxes_5.png

Icon_Element_Boxes_6.png

In the colors tab you can change the following:

  • the colors for the title
  • the colors for smaller text
  • the colors for the icon, icon background, & icon border (these changes will be dependent on your icon box styling)

When you’re finished, navigate to the screen options tab or click save.

Icon_Element_Boxes_7.png

Under the screen options tab you’ll be able to change the following:

  • element visibility depending on screen size (i.e. desktop vs. mobile)
  • font size depending on screen size

When you’re finished making changes, click save.

Icon_Element_Boxes_8.png

From here you can save & update the page, and then head back to the homepage to see your changes reflected. 

Removing Icon Boxes

Use your cursor to hover over the box you want to remove. Click the outermost X.

Icon_Element_Boxes_9.png

Once that's done, you'll need to fix the spacing. Previously, the boxes were spaced in thirds; now we have to set them to halves. This can be done by clicking the right arrow (outlined below) until the fraction changes to 1 / 2.

Icon_Element_Boxes_10.png

Repeat the above step for the second box:

Icon_Element_Boxes_11.png

When you’re finished making these changes, update to save your page changes.

Icon_Element_Boxes_12.png

Adding Icon Element Boxes

You may find it easier to use the clone feature instead of adding the element from scratch. That way your visual settings are duplicated and all you have to change is the text. The clone button is outlined below:

Icon_Element_Boxes_13.png

From there you can set your columns how you prefer. In the screenshot below, I’ve set mine to fourths. You can then edit your text/icon how you see fit, and then click update to save your changes:

Icon_Element_Boxes_14.png

Your homepage will now look something like this:

Icon_Element_Boxes_15.png

 

Was this article helpful?
0 out of 0 found this helpful

Articles in this section

Reclaim Hosting Support Hours
8:00 am - 5:00 pm ET, Monday through Friday
Submit a Ticket
Get a quick and helpful response from the pros.
Need Extra Support?
No problem, we're here to help! Talk to us about Professional Services.