Move header nav to align with logo and icons

[TH8]

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.

[namphan]

Hi @TH8,

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

[TH8]

https://truemotionrunusa.com/

pw: rtoloh

[namphan]

Hi @TH8,

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

[TH8]

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

[TH8]

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?

[namphan]

Hi @TH8,

You want this:

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

Please let me know, I will check it.

[TH8]

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

[TH8]

I could disable search - we only have a small inventory

[namphan · Accepted solution]

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;
  }
}

[TH8]

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

[namphan]

Hi @TH8,

You're welcome and happy to help 😊