Menu below header instead of inline with it

[MollieHammond]

Hi all,

Happy Thursday. If possible i’m hoping for some assistance in putting our menu below the header on our website with the ability to have more than 5 menu items. At the moment it’s stuck in line with the header itself.

Ideally i’d like for the menu banner to be in colour #243e36 that highlights #7ca982 when hovered over, with white text.

Theme: Palo Alto

URL: https://prestige-coffee.com.au/

Any assistance would be greatly appreciated.

Thank you

[devcoders]

Hi @MollieHammond

You want to display the drawer menu below the logo.

[tim_1]

Here is my solution:

1. In Header section settings change “Alignment” to “Logo | Links(center) | Icons”
   

   

2. Scroll down to “Custom CSS” of the same Header section and paste this:

.site-header:not(.site-header--compress) .wrapper {
  flex-wrap: wrap;
  justify-content: center;
}

.site-header:not(.site-header--compress) nav#NavStandard,
.site-header:not(.site-header--compress) #NavStandard .menu__item--icons {
  position: static;
  margin: 0;
}

Result:

[MollieHammond]

Hey,

Thanks so much for taking the time to reply. This code puts the search bar, account icon and cart icon down too. Is there a way to put the icons with the logo, and make the menu in colour #243e36 with #7ca982 when hovered over and white font?

[tim_1]

With color the code can be

.site-header:not(.site-header--compress) .wrapper {
  flex-wrap: wrap;
  justify-content: center;
}
.site-header:not(.site-header--compress) nav,
.site-header:not(.site-header--compress) .menu__item--icons {
  position: static;
  margin: 0;
}

#SiteHeader, .header__dropdown {
  --bg: #243e36;
  --text: white;
}
#SiteHeader:hover, .header__dropdown:hover {
  --bg: #7ca982;
}
predictive-search {
  --text: var(--COLOR-TEXT);
  color: var(--text);
}

Moving icons properly would require theme code edit as they currently have common parent with menu…

[oscprofessional]

Hi @MollieHammond ,

You can absolutely move your main menu below the header and style it with your preferred colors in the Palo Alto theme — it just requires a small layout adjustment and some CSS styling.

Here’s how you can do it:

1. Move the menu below the header

Go to your Shopify admin → Online Store → Themes → Edit Code, then open the file:
sections/header.liquid

Look for where your menu is rendered — it’ll look something like:

{% render 'header-menu' %}

Move that line below the closing tag for your header container (for example, right after the logo and icons block).

2. Add the styling

Now open your CSS file — typically base.css or theme.css — and add this code at the bottom:

.header__menu {
  background-color: #243e36;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; 
  padding: 10px 0;
}

.header__menu a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 15px;
  transition: background-color 0.3s, color 0.3s;
}

.header__menu a:hover {
  background-color: #7ca982;
  color: #ffffff;
}

[topnewyork]

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header {
  flex-direction: column !important;
  align-items: center !important;
}

.header__logo-wrapper {
  margin-bottom: 15px !important;
  justify-content: center !important;
}

.header__nav {
  width: 100% !important;
  justify-content: center !important;
}

.header__menu {
  justify-content: center !important;
}

.header__nav {
  background-color: #243e36; /* Aapka pasand ka menu banner color */
}

.header__nav-link {
  color: #ffffff !important; /* Menu text ka white color */
}

.header__nav-link:hover {
  background-color: #7ca982 !important; /* Hover karne par highlight color */
  color: #ffffff !important; /* Hover par text ka color white hi rahega */
}

Thank you!

[MollieHammond]

@oscprofessional

ll layout adjustment and some CSS

Hey,

Thanks so much for taking the time to respond. I tried this and the menu successfully moved below the header. Unfortunately the menu no longer dropped down. The second code going to the theme css then didn’t make any changes and I had to revert it back to where it was as the menu no longer worked.

[MollieHammond]

Hey,

I’m only wanting the actual menu bar to be the colour, and then where the logo is to remain the same while keeping the icons up near the logo. Thank you for taking the time to respond anyway, it’s really appreciated.

[MollieHammond]

Hey,

Thanks for taking the time to reply. Unfortunately this didn’t make any changes when I put the code in.

[tim_1]

Try just this then:

#SiteHeader, .header__dropdown {
  --bg: #243e36;
  --text: white;
}
#SiteHeader:hover, .header__dropdown:hover {
  --bg: #7ca982;
}
predictive-search {
  --text: var(--COLOR-TEXT);
  color: var(--text);
}

[MollieHammond]

hey,

unfortunately this just made the entire menu green.