Updating Content that Impacts Navigation - NCIOCPL/cgov-digital-platform GitHub Wiki

When a content change necessitates a change to navigation, there are multiple steps that need to be taken to make sure that everything appears correctly.

What Drives Navigation

Navigation is split in two systems:

  1. Site sections drive the left navigation, breadcrumbs, and mobile navigation.
  2. Drupal blocks of raw HTML create the desktop megamenus.

Mega Menu - Formatting Issues

Certain formatting issues can affect the appearance and function of navigation.

Minimizing

In Drupal, sometimes the column formatting of megamenus will not work if the HTML doesn't have all whitespace removed. (We don't know why.)

When you minimize, be careful about how much your tool strips out - some minimizers will remove "" around classes and other things that the HTML still needs to work correctly. Many will also strip the closing tags needed for valid XML.

A simple compressor: https://www.textfixer.com/html/compress-html-compression.php

If that doesn't work, try:

A more complex minimizer: https://kangax.github.io/html-minifier/

Suggest unchecking all defaults and just using "Collapse whitespace". NOTE that this will strip out self-closing tags, meaning that it is NOT valid for Percussion. You will need to find/replace to put the <br /> back in

Hiding the exit notification

If you are editing the footer, the social media icons require different span classes to be added to hide the exit notification.

<li><a class="twitter icon no-exit-notification" href="https://twitter.com/NCIEpiTraining"><span class="show-for-sr">Twitter</span></a></li>

Pro Tips

  • Make sure you get a clean copy of the CURRENT code blocks before you start updating. Drupal can be finicky about specifics in HTML formatting, and one error may cause the menu to become invisible.
  • Test any changes on DEV first.

Scenario - Adding a Page

To add a page that adding a page that would appear in navigation, these are the steps to be completed:

  • Create the site section for the new page
  1. Go to Structure > Taxonomy > Site Sections and Add a Term
  2. Set the Name of the site section. Use something distinct (e.g., instead of Research, use Lung Cancer Research)
  3. Fill in the Pretty URL. This will be the last segment of the URL of the page assigned to this site section. Do not include slash (/). Only use lowercase letters and hyphens to separate words.
  4. Set the Navigation Label to override the site section Name in the left nav. If this field is left blank, the site section Name will appear in the left nav.
  5. If the page assigned to this site section will be the start of its own site section, select Set Section Nav Root. Otherwise, leave this unchecked.
  6. Relations:
    • DO NOT forget this easy to miss field!
    • Find and select the site section that will be the parent of the term you are currently creating.
    • You can set the weight (order) here, or when completed, view the list terms and drag to reorder.
  7. Leave the Landing Page field blank until the new page is ready to go live. Site sections display immediately once a landing page is set, even if the page has not been published (the site section will display in the navigation and when selected, will give an error message). You can also hide it by checking the "hide" boxes.
  • Create the page
    • Assign the site section to the page
  • Publish the page
  • Update the site section
    • Assign the new page as the landing page
    • Unhide the site section (if necessary)

If the page also appears in the megamenu:

  • Update the Raw HTML content block for the appropriate megamenu
  • Clear the cache by going to Configuration > Search and Metadata > Invalidate main nav from cache. NOTE: This should be done in the evening (8PM ET or later) to avoid slowing down the site during heavy use hours.

Scenario - Updating a Navigation Label

If you are updating the navigation label - the text that appears in the breadcrumbs and left navigation - and that page also appears in the megamenu, these are the steps to be completed:

  • Update the site section navigation label
  • Update the Raw HTML content block for the appropriate megamenu
  • Clear the main nav cache
⚠️ **GitHub.com Fallback** ⚠️