How to get pages under the search bar?

Technical Q&A

Topic summary

Issue: User wants to reposition navigation menu pages to appear below the search bar instead of alongside it.

Visual Context: Two screenshots demonstrate the desired layout change - moving the horizontal navigation menu from the same row as the search bar to a row beneath it.

Solution Provided:

  • Navigate to: Online Store > Themes > Customise > Header section
  • Add custom CSS code that uses CSS Grid properties to move the menu to row 2 and span full width
  • The solution includes a media query targeting screens 990px and wider

Status: A complete CSS-based solution has been provided. Implementation pending.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

How I can get from this:

Näyttökuva 2025-05-23 174634.png

To this:

Näyttökuva 2025-05-23 174308.png
Näyttökuva 2025-05-23 174308.png1792×104 19.8 KB

So the pages need to be under the search bar.

url: pcmaster.fi

2

Hi @Nicolas11

  1. To do this go to Online Store > Themes > Customise

  2. Click on the header section

  3. Add to Custom CSS

@media screen and (min-width: 990px) {
.header__inline-menu {
grid-row: 2;
grid-column: 1 / -1;
}
}