Managing Navbar Content
To ensure the CHSSWeb Navbar functions optimally, it is important to follow specific guidelines when managing navigation items. The design and layout of the navbar depend on the number of items, their length, and the size of the logo used. Below are some practical tips to help you maintain and work with navigation items effectively.
The navigation bar items are managed by the CHSSWeb team. Each item typically reflects the name of its corresponding page or section. If the page or section name is changed by the editors of the site, the navigation item will automatically update to reflect the new name. However, the CHSSWeb team also has the ability to explicitly set the navigation item names. In such cases, subsequent changes to the page or section titles will not affect the navigation labels. The following outlines the current behavior and configuration options:
Editable by Site Owners/Content Authors
Page or Section Titles: If a navigation item is not manually overridden, the menu label will reflect the name of the corresponding page or section.
Example: If a navigation item is labeled “About” and the page title is changed to “About the Department,” the navigation label will automatically update to reflect that change.
Managed by the CHSSWeb Team
Adding or Removing Navigation Items: The CHSSWeb team is responsible for inserting or deleting menu items across the three navigation sections.
Override Navigation Labels: When necessary, the CHSSWeb team can set a specific display name for a navigation item. This name will take precedence over the default page or section name.
Menu Item Length and Logo Size Dependency
Menu Items and Available Space
The space available for navigation menu items varies based on the logo size. Since the logo can differ (university, college, or department logo), the number of letters and words you can fit into the navbar will also vary. The general rule is to keep each menu item as short as possible. Each item should ideally be no more than 1–2 words to prevent crowding.
Consider Screen Size Breakpoints
The breakpoint for the navbar design is 1201px, meaning that when the screen size drops below this width, the navbar switches to a tab/mobile design. To ensure proper function, test the layout of your navigation items at 1201px to gauge the maximum space available. Here’s how you can check:
Resize the screen to 1201px: This will simulate the environment where the navbar is transitioning to a mobile design.
Check the available space for menu items: For example, at this breakpoint, you might see that there are 71 characters in the main navigation. If there is still space on the left side of the navbar, you may have room to add one or two more items, based on the available space.
Navbar Items Overflow: In the example below, the navigation bar items exceed the available space. This results in inefficient use of layout space, causing the content to overflow to the left and partially hide some menu items.
Maximizing Space Usage
- Logo space impact: The logo takes up a certain amount of space depending on its size, which impacts the available space for navigation menu items. The larger the logo, the less space there is for the menu items. It’s crucial to keep this in mind when selecting which items to display.
- Use the shortest possible terms for each menu item: When testing the navbar at different screen sizes, ensure that you use shorter terms for your menu items to make the best use of available space.
Tips for Customizing Navigation Items
- Main Navigation (Main Nav)
The main navigation should be reserved for the primary sections of the website, such as “About” and “Programs”. Ensure these items are clear and concise to allow for easy user navigation. - Audience Navigation (Audience Nav)
The audience navigation is typically used for items relevant to specific groups (e.g., Students, Faculty, Alumni). Keep these items short and only include items that are crucial for the audience. - Utility Navigation (Utility Nav)
Utility nav items, such as links to Giving or Contact pages, should be compact and minimal. Keep the titles of these items concise so they don’t take up too much space.