The Global Navigation

Owned by Melissa Chavira
Last updated: Jun 14, 2023
4 min read

The global navigation is a standard part of the NMSU website tempalte that presents enterprise-level tactical links, navigation, and search.

The purpose of the global navigation element is to ensure that specific content, including access to the NMSU enterprise web search and crosslinks to important NMSU system resources, Apply, and Giving information, are available (even if collapsed) on every page within the institution's website ecosystem.

All NMSU websites must present the global navigation, exactly as it appears in the specifications found on this page. This includes matching the fonts and the exact links found within collapsed state. News/Blog sites templates do not include the global navigation and it is not required.

Updates to the global navigation will be made regularly. This page will contain the version history and changes.

If you participate in administering a website that is NOT part of the University's central CMS offering, please note that you will need to update this code regularly as it changes system-wide. If you use the University's central brand templates, the global navigation changes will be updated automatically. Exceptions are made for Community College and Global Campus sites.

Global Navigation Presentation: Desktop Views

The desktop view of the global navigation element spans across the full width of the browser immediately above the web site masthead. It includes a crimson bar that divides the global navigation region from the rest of the web site masthead area.

Collapsed State

The default state of the global navigation element is set to be collapsed.

Style Rules:

  • The global navigation height must be exactly 28 pixels

  • The background color of the container is #8c0b42.

  • Default links should be Apply, Visit, and Give. Some exceptions apply depending on organization or department.

  • Links should be bold, uppercase and 14px

  • The "search" expander icon is part of Font Awesome Icons

  • The  "search" expander icon color is #00c9a7.

  • The horizontal rule framing the bottom of the container is white and set to 1 pixel. 

Expanded State

The  global navigation expanded state appears by activating the "search" button. It reveals NMSU system wide quick link navigation and a search bar.

Style Rules:

  • There is no transition effect to the expand or collapse action.

  • The global navigation height must be at least 350 pixels

  • The background color of the container is #f8fafd.

  • All elements within the global navigation should be setup within a container that has a max-width of 1140 pixels

  • The "Collapse" button should be right-aligned to the browser's right margin.

  • All elements within the sliver should be vertically-aligned so as to allow roughly equal padding of 48px above and below the element.

  • The quick links included should be uppercase, bold and 14px

  • The quick links color should be #8c0b42

  • The hover state for quick links items should not use text-decoration.

  • The Search Box container should feature border-box with a 1 pixel border with the color #e7eaf3

  • The font for the search box should be Open Sans with the color #1e2022

  • The "Search" button should be #8c0b42

  • The search associated with this submission element should connect to an enterprise NMSU search and should not feature a local search of the current site.

Global Navigation Presentation: Mobile Views

The mobile view presentation of the global navigation is similar in many respects to the desktop view. This includes the appearance of the "search" icon referenced in the desktop view specifications.

However, some unique aspects of the mobile presentation are included below.

Style Rules:

  • "search" expand control changes to a simple touchable icon (from the button treatment present on desktop view).

  • No transition effects are present on expand or collapse.

  • Expanding the global navigation reveals enterprise search region without quick links using appropriate padding.

  • Navigation items in the collapsed stated are included in a drop down menu.

Global Navigation Items in the Expanded State

The quick links that appear in the expanded state of the global navigation may only be edited and changed by MARCOMM. Departments who build global navigations of their own to comply with our visual identity may not change or present alternative material in the expanded state. The purpose of the global navigation is to present consistent enterprise options on all web pages.

The following links are the exact labels and links required within the expanded global navigation element navigation. The left-aligned navigation links should be:

Unique Aspects to the Global Navigation on the NMSU Homepage and Top-Tier Website

Individuals who browse the top-tier website may encounter the global navigation element in a slightly-altered presentation.