diff --git a/es-bs-base/scss/_nav.scss b/es-bs-base/scss/_nav.scss
index e85d7ee83..2b8a4e671 100644
--- a/es-bs-base/scss/_nav.scss
+++ b/es-bs-base/scss/_nav.scss
@@ -461,6 +461,7 @@ $nav-hover-delay: 300ms;
         color: variables.$blue-900;
         text-decoration: none;
         background: variables.$gray-50;
+        border: variables.$btn-border-width solid transparent;
         @include border-radius.border-radius(8px);
       }
 
diff --git a/es-design-system/pages/molecules/es-search-bar.vue b/es-design-system/pages/molecules/es-search-bar.vue
index 9c8048076..36f3101ad 100644
--- a/es-design-system/pages/molecules/es-search-bar.vue
+++ b/es-design-system/pages/molecules/es-search-bar.vue
@@ -6,40 +6,47 @@
         <h2>
             Basic example
         </h2>
-        <es-search-bar
-            id="searchBar1"
-            class="my-500" />
+        <b-row class="mb-100 justify-content-center">
+            <b-col lg="10">
+                <es-search-bar
+                    id="searchBar1"
+                    class="my-500" />
+            </b-col>
+        </b-row>
         <h2>
             Example with open/close functionality
         </h2>
-        <es-search-bar
-            v-if="showSearchBar"
-            id="searchBar2"
-            class="my-500">
-            <template #close>
+        <b-row class="mb-100 justify-content-center">
+            <b-col lg="10">
+                <es-search-bar
+                    v-if="showSearchBar"
+                    id="searchBar2"
+                    class="my-500">
+                    <template #close>
+                        <es-button
+                            class="nav-button order-2 ml-50"
+                            aria-label="Close search bar"
+                            variant="link"
+                            @click="toggleSearchBar()">
+                            <icon-x
+                                width="30px"
+                                height="30px" />
+                        </es-button>
+                    </template>
+                </es-search-bar>
                 <es-button
-                    class="position-absolute nav-button mb-3"
-                    aria-label="Close search bar"
-                    style="right: 0"
+                    v-else
                     variant="link"
+                    aria-label="Open search bar"
+                    class="nav-button nav-link icon-toggle d-flex flex-nowrap my-500 mx-auto"
                     @click="toggleSearchBar()">
-                    <icon-x
-                        width="30px"
-                        height="30px" />
+                    <icon-search
+                        class="align-self-center search-icon"
+                        width="20px"
+                        height="20px" />
                 </es-button>
-            </template>
-        </es-search-bar>
-        <es-button
-            v-else
-            variant="link"
-            aria-label="Open search bar"
-            class="nav-button nav-link icon-toggle d-flex flex-nowrap my-500 mx-auto"
-            @click="toggleSearchBar()">
-            <icon-search
-                class="align-self-center search-icon"
-                width="20px"
-                height="20px" />
-        </es-button>
+            </b-col>
+        </b-row>
 
         <div class="my-500">
             <h2>
diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 4d8b710c9..f62081bd3 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -111,24 +111,38 @@
                             :main-menu-text="globalContent.mainMenuText"
                             :name="topLevelMenu.name"
                             :sub-heading="topLevelMenu.subHeading"
-                            :topics="topLevelMenu.topics">
+                            :topics="topLevelMenu.topics"
+                            class="top-level-menus">
                             <template #logo>
                                 <slot name="logo" />
                             </template>
                         </es-nav-bar-top-level-menu>
+                        <!-- desktop search bar -->
+                        <div
+                            class="w-100 nav-search-bar-desktop nav-item top-header mx-0 justify-content-center"
+                            style="display: none">
+                            <es-search-bar id="searchBarDesktop">
+                                <template #close>
+                                    <es-button
+                                        class="order-2 nav-button nav-search-close-desktop ml-50"
+                                        aria-label="Close search bar"
+                                        variant="link">
+                                        <icon-x />
+                                    </es-button>
+                                </template>
+                            </es-search-bar>
+                        </div>
                         <!-- desktop search icon -->
                         <div
                             id="navBarSearchIcon"
-                            class="nav-item d-none pt-100"
-                            :class="{
-                                'd-lg-block': showSearch,
-                            }">
+                            class="search-icon-desktop nav-item pt-100"
+                            :style="{ display: showSearch ? 'flex' : 'none' }">
                             <es-button
                                 variant="link"
                                 aria-label="Open search bar"
                                 class="nav-button nav-link search-toggle-desktop d-none d-lg-flex flex-nowrap py-100">
                                 <icon-search
-                                    class="align-self-center search-icon-desktop"
+                                    class="align-self-center"
                                     width="20px !important"
                                     height="20px !important" />
                             </es-button>
@@ -139,24 +153,6 @@
                             class="d-none d-lg-block pt-100"
                             :logged-out="accountContent.loggedOut" />
                     </b-container>
-                    <!-- desktop search bar -->
-                    <b-container
-                        class="nav-search-bar-desktop"
-                        style="display: none">
-                        <div class="row w-100">
-                            <es-search-bar id="searchBarDesktop">
-                                <template #close>
-                                    <es-button
-                                        class="position-absolute nav-button mb-100 nav-search-close-desktop"
-                                        aria-label="Close search bar"
-                                        style="right: 0"
-                                        variant="link">
-                                        <icon-x />
-                                    </es-button>
-                                </template>
-                            </es-search-bar>
-                        </div>
-                    </b-container>
                     <!-- mobile+desktop product menus -->
                     <b-container
                         class="flex-lg-nowrap justify-content-lg-end product-menu">
@@ -337,13 +333,14 @@ export default {
         // Search bar elements for hiding/showing
         const searchIconMobile = document.querySelector('.search-icon-mobile');
         const searchIconDesktop = document.querySelector('.search-icon-desktop');
-        const productMenu = document.querySelector('.product-menu');
 
         const navSearchBarMobile = document.querySelector('.nav-search-bar-mobile');
         const navSearchBarDesktop = document.querySelector('.nav-search-bar-desktop');
         const searchBarMobile = document.getElementById('searchBarMobile');
         const searchBarDesktop = document.getElementById('searchBarDesktop');
 
+        const topLevelMenus = document.querySelectorAll('.top-level-menus');
+
         // Function to show/hide search bar
         function toggle_search_bar_mobile(show_search_bar) {
             navSearchBarMobile.style.display = show_search_bar ? 'flex' : 'none';
@@ -358,14 +355,15 @@ export default {
 
         // Function to show/hide search bar
         function toggle_search_bar_desktop(show_search_bar) {
+            topLevelMenus.forEach((menu) => {
+                // eslint-disable-next-line no-param-reassign
+                menu.style.display = show_search_bar ? 'none' : 'flex';
+            });
+            searchIconDesktop.style.display = show_search_bar ? 'none' : 'flex';
             navSearchBarDesktop.style.display = show_search_bar ? 'flex' : 'none';
-            productMenu.style.display = show_search_bar ? 'none' : 'flex';
 
             if (show_search_bar) {
-                searchIconDesktop.classList.add('search-open');
                 searchBarDesktop.focus();
-            } else {
-                searchIconDesktop.classList.remove('search-open');
             }
         }
         // Function to show/hide overlay
@@ -406,6 +404,7 @@ export default {
 
         // Collapse all open menus on overlay click
         overlay.addEventListener('click', () => {
+            toggle_search_bar_desktop(false);
             collapse_mobile_menus();
         });
 
@@ -417,7 +416,6 @@ export default {
             .forEach((element) => {
                 element.addEventListener('mouseover', () => {
                     show_overlay(true);
-                    toggle_search_bar_desktop(false);
                 });
                 element.addEventListener('mouseout', () => {
                 // Hide overlay on mouseout on desktop not mobile
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index d341ed4e1..309659f9b 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="align-items-center w-100 d-flex flex-column flex-lg-row justify-content-center position-relative">
-        <!--  d-flex flex-column -->
         <form
             action="/search/"
             class="d-flex align-items-center mx-auto justify-content-center order-2 order-lg-1 w-100"
@@ -9,11 +8,12 @@
                 :id="id"
                 v-model="searchText"
                 aria-label="Search bar"
-                class="w-50"
+                class="w-50 flex-grow-1 mb-lg-0"
                 label-sr-only
                 name="query"
                 :placeholder="placeholder"
                 :value="searchText"
+                v-bind="$attrs"
                 @keydown.enter="checkSearchText">
                 <template #label>
                     Search bar
@@ -23,12 +23,11 @@
                 </template>
             </es-form-input>
             <es-button
-                class="ml-50 mb-100"
+                class="ml-50 mb-100 mb-lg-0"
                 :disabled="!searchText"
                 type="submit"
                 :value="buttonText">
                 {{ buttonText }}
-                <!-- <input enterkeyhint="search" /> -->
             </es-button>
         </form>
         <slot name="close" />
@@ -36,7 +35,6 @@
 </template>
 
 <script lang="js">
-// import axios from 'axios';
 import EsButton from './EsButton.vue';
 import EsFormInput from './EsFormInput.vue';