toggle search bar for small screen sizes

Author: hmillersarah

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

@@ -32,15 +32,12 @@ a h5 {
 }
 
 form {
-  width: 100%;
   height: 3em;
   background-color: white;
   display: flex;
-  padding-right: 0.2em;
 }
 
 form div {
-  width: 100%;
   background-color: white;
   display: flex;
   flex-flow: row nowrap;
@@ -89,7 +86,6 @@ input {
 .navigation {
   display: flex;
   flex-flow: row nowrap;
-  width: 40%;
 }
 
 #search-icon {
@@ -237,8 +233,36 @@ input {
   z-index: 3000;
 }
 
+.search-bar-open {
+  width: 100%;
+}
+
+/* 425px and below screen sizes */
 @media screen and (max-width: 27em) {
   .logo h4 {
     font-size: 1em;
   }
 }
+
+/* 768px and below screen sizes */
+@media screen and (max-width: 48em) {
+  #search-input {
+    display: none;
+  }
+}
+
+/* 1024px and above screen sizes */
+@media screen and (min-width: 64em) {
+  .navigation {
+    width: 40%;
+  }
+
+  form {
+    width: 100%;
+    padding-right: 0.2em;
+  }
+
+  form div {
+    width: 100%;
+  }
+}

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

@@ -1,39 +1,46 @@
 <link href="web-components/nav-header/nav-header.css" rel="stylesheet" />
 <link
   href="jekyll-tipue-search/assets/tipuesearch/css/tipuesearch-component.css"
-  rel="stylesheet" />
+  rel="stylesheet"
+/>
 <link
   rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+/>
 <header>
   <a class="skip-link" href="#content">Skip to content</a>
   <nav aria-label="masthead">
     <section class="masthead">
       <a href="index.html" class="logo">
         <img src="wp-content/IMS_logo_small.png" alt="IMS logo" />
-        <h4>IBM <b>IMS Central</b></h4>
+        <h4 class="site-header" style="display: block">
+          IBM <b>IMS Central</b>
+        </h4>
       </a>
       <div class="navigation">
         <form id="search-form">
           <div class="search-bar">
             <img
               src="wp-content/icons/icon_search.svg"
               id="search-icon"
-              alt="search" />
+              alt="search"
+            />
             <input
               id="search-input"
               name="search"
               type="text"
               pattern=".{3,}"
               placeholder="What are you looking for today?"
               autofocus
-              autocomplete="off" />
+              autocomplete="off"
+            />
             <img
               src="wp-content/icons/icon_close.svg"
               id="clear-icon"
               role="button"
               alt="clear"
-              tabindex="0" />
+              tabindex="0"
+            />
           </div>
         </form>
         <div id="search-results"></div>
@@ -42,12 +49,14 @@ <h4>IBM <b>IMS Central</b></h4>
           type="checkbox"
           id="menu-toggle"
           tabindex="-1"
-          aria-label="menu toggle" />
+          aria-label="menu toggle"
+        />
         <a
           class="hamburger-menu"
           role="button"
           tabindex="0"
-          aria-label="menu button">
+          aria-label="menu button"
+        >
           <div></div>
           <div></div>
           <div></div>
@@ -84,13 +93,15 @@ <h5>IMS repos on GitHub</h5>
             href="https://www.ibm.com/products/ims"
             tabindex="-1"
             rel="noopener noreferrer"
-            target="_blank">
+            target="_blank"
+          >
             <h5>
               IMS product page
               <img
                 src="wp-content/Icon07.png"
                 alt="External link"
-                class="external-link" />
+                class="external-link"
+              />
             </h5>
             <p>Learn about the latest IMS features and offerings.</p>
           </a>
@@ -137,13 +148,15 @@ <h5>IMS Gold</h5>
             href="https://community.ibm.com/community/user/groupz?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560"
             tabindex="-1"
             rel="noopener noreferrer"
-            target="_blank">
+            target="_blank"
+          >
             <h5>
               IMS Community
               <img
                 src="wp-content/Icon07.png"
                 alt="External link"
-                class="external-link" />
+                class="external-link"
+              />
             </h5>
             <p>
               See the latest IMS blogs, engage in IMS forums, and more by
@@ -168,17 +181,17 @@ <h5>IMS Customer Internship</h5>
             href="https://community.ibm.com/community/user/blogs/daleah-sampler/2025/09/09/ims-developer-community"
             tabindex="-1"
             rel="noopener noreferrer"
-            target="_blank">
+            target="_blank"
+          >
             <h5>
               IMS Developer Community
               <img
                 src="wp-content/Icon07.png"
                 alt="External link"
-                class="external-link" />
+                class="external-link"
+              />
             </h5>
-            <p>
-              A place to connect with other IMS developers.
-            </p>
+            <p>A place to connect with other IMS developers.</p>
           </a>
         </div>
         <div>