Navigation development on Lancaster Students' Union Website

Union Cloud Custom Navigation Development

This work was developed on the Union Cloud Content Management System for Lancaster University Student's Union.

Development of bespoke styles to make the main navigation work on mobiles and add menu text quotes to each menu section.

This shows the final menu screenshot that includes the menu quote text.

It has also been updated to:

  • Indicate where you currently are within the menu (example shows the events section)
  • Added the menu quote text to work on mobiles too (see below)
  • Updated the fonts and added font awesome icons
  • Added the background colour
  • Arranged the menu items in a vertical list (changed from a horizontal list)

Below is a screenshot of the orginal menu.

It has no indicator showing where you are and the menu items were listed horizontally making it hard to read.

Original Lancaster Students' Union Website image

Here is a screenshot showing the improved mobile menu that includes the menu quote text.

Lancaster Students' Union mobile menu image

Original Website

Below shows the original  menu on a mobile when you clicked a top level item.

None of the sublevel menu items were clickable and they appeared over the top of the main menu when they were clicked.

Lancaster Students' Union old mobile menu image

Do you need a website for your business?

Are you looking to get your business online or to improve your existing website?

Contact me

Do you want to outsource your web design project?

Are you looking to outsource your web project to a freelance web designer?

Contact me