carroll-ccsd 
Nice Work has already done a Global Nav Menu - Custom Tray but with the new nav popping up tomorrow I didn't see any info about how to address those changes. So here is mine. @James 
Thank You for the initial nudge to utilize mutation observers a lot more. (depicted in screenshot is the library the only custom nav we use for are school). Feel free to make the script better and share those changes as well
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">LibraryResNav</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">const</SPAN> checkIfNull <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">async</SPAN> selector <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN>selector<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">await</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Promise</SPAN><SPAN class="punctuation token">(</SPAN>resolve <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="token function">requestAnimationFrame</SPAN><SPAN class="punctuation token">(</SPAN>resolve<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="keyword token">return</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN>selector<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="token function">checkIfNull</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#application"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// watching children && tree</SPAN><BR /> <SPAN class="keyword token">const</SPAN> navR <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#application"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">let</SPAN> uL<SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">const</SPAN> config <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> attributes<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN><BR /> attributeFilter<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"aria-hidden"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN><BR /> subtree<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">const</SPAN> liConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="string token">"link reference"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#"</SPAN><SPAN class="punctuation token">,</SPAN><BR /> <SPAN class="string token">"name of SVG"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Library"</SPAN><SPAN class="punctuation token">,</SPAN><BR /> <SPAN class="string token">"view box dimensions"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"0 0 500 500"</SPAN><SPAN class="punctuation token">,</SPAN><BR /> <SPAN class="string token">"name next to svg"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="template-string token"><SPAN class="string token">`Library`</SPAN></SPAN><SPAN class="punctuation token">,</SPAN><BR /> <SPAN class="string token">"the g and path"</SPAN><SPAN class="punctuation token">:</SPAN> `<BR /> <SPAN class="operator token"><</SPAN>g role<SPAN class="operator token">=</SPAN><SPAN class="string token">"presentation"</SPAN><SPAN class="operator token">></SPAN><BR /> <SPAN class="operator token"><</SPAN>path d<SPAN class="operator token">=</SPAN><SPAN class="string token">"M459.91 192.02c-.7 0-1.39.02-2.06.05-49.8 2.84-140.51 13-201.84 47.57-61.33-34.57-152.05-44.73-201.84-47.57-.67-.04-1.36-.05-2.06-.05C31.71 192.01 0 206.36 0 242.22v178.05c0 26.69 21.25 48.7 48.34 50.12 34.41 1.81 120.56 9.08 177 37.47 4.68 2.37 9.66 3.5 14.66 3.84v.27h2.27c.09 0 .18.03.26.03h26.94c.09 0 .18-.03.26-.03H272v-.27c5-.34 9.98-1.48 14.66-3.84 56.44-28.39 142.59-35.65 177-37.47 27.09-1.42 48.34-23.44 48.34-50.12V242.22c0-35.86-31.71-50.2-52.09-50.2zM240 479.35c-.09-.04-.18-.02-.28-.07-59.59-29.97-144.43-38.45-189.7-40.84-10.1-.53-18.02-8.51-18.02-18.17V242.22c0-6.05 1.77-10 5.93-13.2 4.47-3.44 10.47-5.01 14.4-5.01 37.01 2.11 129.27 10.58 187.67 43.36v211.98zm240-59.08c0 9.66-7.92 17.64-18.03 18.17-45.27 2.38-130.11 10.86-189.76 40.87-.07.04-.14.02-.22.05V267.37c58.39-32.79 150.66-41.25 187.51-43.35l.39-.01c.2 0 20.09.49 20.09 18.21v178.05zM256 191.99c53.02 0 96-42.98 96-95.99S309.02 0 256 0s-96 42.98-96 95.99 42.98 96 96 96zM256 32c35.29 0 64 28.71 64 64s-28.71 64-64 64-64-28.71-64-64 28.71-64 64-64z"</SPAN> fill<SPAN class="operator token">-</SPAN>rule<SPAN class="operator token">=</SPAN><SPAN class="string token">"evenodd"</SPAN> stroke<SPAN class="operator token">=</SPAN><SPAN class="string token">"none"</SPAN> stroke<SPAN class="operator token">-</SPAN>width<SPAN class="operator token">=</SPAN><SPAN class="string token">"1"</SPAN><SPAN class="operator token">></SPAN><BR /> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>path<SPAN class="operator token">></SPAN><BR /> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>g<SPAN class="operator token">></SPAN><BR /> `<BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Callback to execute when mutations are observed</SPAN><BR /> <SPAN class="keyword token">const</SPAN> theOoze <SPAN class="operator token">=</SPAN> mutationsList <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">let</SPAN> mutation <SPAN class="keyword token">of</SPAN> mutationsList<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">//console.log(mutation.target.hasAttribute("aria-hidden"));</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>mutation<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hasAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"aria-hidden"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">const</SPAN> notNull <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">async</SPAN> selector <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN>selector<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">await</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Promise</SPAN><SPAN class="punctuation token">(</SPAN>resolve <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="token function">requestAnimationFrame</SPAN><SPAN class="punctuation token">(</SPAN>resolve<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="keyword token">return</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN>selector<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="token function">notNull</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'div[role="dialog"][aria-label="Global Navigation"] ul'</SPAN><SPAN class="punctuation token">)</SPAN><BR /> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR /> uL <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN><BR /> <SPAN class="string token">'div[role="dialog"][aria-label="Global Navigation"] ul'</SPAN><BR /> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><BR /> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">let</SPAN> cloneLi <SPAN class="operator token">=</SPAN> uL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"li"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">cloneNode</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> cloneLi<BR /> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"a"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><BR /> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"href"</SPAN><SPAN class="punctuation token">,</SPAN> liConfig<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"link reference"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> cloneLi<BR /> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"svg"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><BR /> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">,</SPAN> liConfig<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"name of SVG"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> cloneLi<BR /> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"svg"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><BR /> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"viewBox"</SPAN><SPAN class="punctuation token">,</SPAN> liConfig<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"view box dimensions"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> cloneLi<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"svg"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN><BR /> liConfig<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"the g and path"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN><BR /> cloneLi<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"span:nth-last-of-type(1)"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> liConfig<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"name next to svg"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN><BR /> uL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>cloneLi<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR /> <SPAN class="comment token">// observer instance linked to the callback</SPAN><BR /> <SPAN class="keyword token">const</SPAN> observer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MutationObserver</SPAN><SPAN class="punctuation token">(</SPAN>theOoze<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR /> <SPAN class="comment token">// Start observing body since responsive nav is housed only in the body at end under <!-- #application --></SPAN><BR /> observer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">observe</SPAN><SPAN class="punctuation token">(</SPAN>navR<SPAN class="punctuation token">,</SPAN> config<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><SPAN class="token function">LibraryResNav</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
