Move header nav to align with logo and icons

Store Design
, , , , ,

Topic summary

A user seeks to reposition their Shopify store’s header navigation menu to align horizontally with the logo and icons, rather than appearing below them. They’re using the Enterprise theme.

Key Issue Identified:
When moving the navigation elements up, the search functionality creates an overlay that conflicts with the new layout. The search bar displays over the repositioned menu when the search icon is clicked.

Solution Provided:
A CSS code snippet was shared to add to the main.css file (via Actions > Edit code > Assets). The code uses media queries to:

  • Reorder the main menu to align with header elements
  • Control search bar visibility and display behavior
  • Hide the main menu when search is active

Outcome:
The user accepted the solution and decided to disable the search feature entirely, as their store has limited inventory. Issue resolved.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

In the screenshot below the menu nav in the header is below the logor and the icons. I would like it to appear inline with them. I’m using the Enterprise theme. Can anyone provide an HTML or CSS solution? Thanks.

header alignment.png
header alignment.png1400×314 60 KB

2

Hi @TH8 ,

Please send the website link, I will check it for you

3

https://truemotionrunusa.com/

pw: rtoloh

4

Hi @TH8 ,

I tested and when you move, the search will show an overlay menu when enabled.

Screenshot.png
Screenshot.png2704×330 33 KB

5

Not sure why you’re pointing that out? I want to move the navigation elements in line with the logo and icons. I chose to minimize the search bar

6

Or are you saying that when the nav elements are moved up, when the search icon is clicked they move below to show the search bar?

7

Hi @TH8 ,

You want this:

1.png
1.png2670×262 31.4 KB

I am referring to clicking the search icon, it will show something like this right?

2.png
2.png2666×388 74 KB

Please let me know, I will check it.

8

I could disable search - we only have a small inventory

9

That is correct. I could disable search, we only have a small inventory

10

Hi @TH8 ,

Please go to Actions > Edit code > Assets > main.css file and paste this at the bottom of the file:

@media (min-width: 769px) {
  .main-menu {
    order: 1;
    width: auto;
  }
  .header.search-is-visible .main-menu {
    display: none;
  }
  .header__search {
    display: none;
  }
  .header.search-is-visible .header__search {
    display: block;
  }
}
11

Fantastic, thanks. I’ll disable search for now.

1 Like
12

Hi @TH8 ,

You’re welcome and happy to help :blush: