How can I center a search bar above my menu?

Store Design
,

Topic summary

Goal: Place the Sense theme’s search bar/icon centered above the menu in the header.

Context & access: A storefront preview link and password were shared for review.

Proposed solutions:

  • CSS absolute positioning: Add rules in base.css to make the header container relative and position .header__search absolutely (e.g., right: -100%, top: 70%).
  • CSS Grid layout for desktop (min-width: 990px): Adjust .header–top-center grid-template-areas to ‘heading left-icon icons’ on the first row and full-width ‘navigation’ on the second row; center .header__search with justify-self: center.

Outcome so far:

  • The original poster reported that both CSS approaches did not work.
  • A helper requested the preview link for direct inspection to diagnose theme-specific structure and selectors.

Status: Unresolved and ongoing. Next step is for a helper to review the live preview to identify correct selectors/layout hooks.

Notes:

  • base.css is the theme’s main stylesheet.
  • grid-template-areas is a CSS Grid feature to control element placement in named layout regions.
Summarized with AI on January 30. AI used: gpt-5.
4

@EvaMtz

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.header.header--top-center.header--mobile-center.page-width.header--has-menu {
  position: relative;
}
.header__search {
  position: absolute;
  right: -100%;
  top: 70%;
}