update menu size and item names

Author: hmillersarah

web-components/nav-header/nav-header.css

@@ -168,6 +168,10 @@ form div > img {
     position: absolute;
 }
 
+.show-menu {
+    height: 35em;
+}
+
 .menu {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -230,4 +234,11 @@ form div > img {
     top: 0.3125em;
     width: auto;
     z-index: 3000;
+}
+
+@media  screen and (max-width: 89em) {
+    .show-menu {
+        height: 42em;
+    }
+    
 }

web-components/nav-header/nav-header.html

@@ -39,15 +39,15 @@ <h4>IBM <b>IMS Central</b></h4>
                 <div>
                     <h3>Learn</h3>
                     <a href="ims-videos.html" tabindex="-1">
-                        <h5>Videos</h5>
+                        <h5>IMS videos</h5>
                         <p>Choose from hundreds of educational videos on IMS components, functions, and tools.</p>
                     </a>
                     <a href="ims-education.html" tabindex="-1">
-                        <h5>Courses</h5>
+                        <h5>IMS courses</h5>
                         <p>Get in-depth IMS education with these self-paced courses and instructor-led classes and earn digital badges.</p>
                     </a>
                     <a href="ims-repos.html" tabindex="-1">
-                        <h5>Repos on GitHub</h5>
+                        <h5>IMS repos on GitHub</h5>
                         <p>Get code samples and tutorials on IMS components, workflows, Java, and more.</p>
                     </a>
                 </div>

web-components/nav-header/nav-header.js

@@ -116,13 +116,15 @@ function createComponent(html) {
             menuToggle.checked = checkedState;
             // Update display of dropdown menu based on checked state
             if (checkedState) {
-                dropdownMenu.style.height = '35em';
+                dropdownMenu.classList.add('show-menu');
+                // dropdownMenu.style.height = '35em';
                 // Make menu items focusable
                 for (let i = 0; i < menuItems.length; i++) {
                     menuItems[i].tabIndex = '0';
                 }
             } else {
-                dropdownMenu.style.height = '0em';
+                dropdownMenu.classList.remove('show-menu');
+                // dropdownMenu.style.height = '0em';
                 // Make menu items non-focusable
                 for (let i = 0; i < menuItems.length; i++) {
                     menuItems[i].tabIndex = '-1';