How can I put my Menu Below the Header logo

Store Design
, ,
1

Hi all,

Hope everyone has had a fantastic week. I was hoping to get some help on how to put our menu below the logo in our header - keeping the logo centered and menu centered?

There doesn’t seem to be an easy option on the front end to do this so any help would be greatly appreciated.

URL: https://www.coffee.prestigerepairs.com.au/

Theme: Palo Alto

MollieHammond_0-1746759003950.png
MollieHammond_0-1746759003950.png1896×182 72 KB

Thank you in advance :slightly_smiling_face:

2 Likes
2

@MollieHammond please open customize settings to check if you have an option to change header layout with menu down, if no then we will need to edit the header code to have it like you want. Right now I can see hamburger menu

3

Hello @MollieHammond
To achieve this, we’ll need to make changes to the theme’s code structure. I’ll also need access to your theme to implement it properly.

4

Hey @MollieHammond ,

Hope you’re doing fantastic :grinning_face_with_smiling_eyes:

I’ve found a solution that should work nicely with your Palo Alto theme.

Here’s some custom CSS code that will:

  • Position your menu below your logo
  • Keep both the logo and menu centered
  • Maintain proper spacing and alignment
/* Custom header layout with menu below logo */
.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;
}

/* If using mobile menu, adjust that too */
@media screen and (max-width: 990px) {
  .header__mobile-links {
    text-align: center;
  }
}

How to implement this:

  1. Log in to your Shopify admin panel
  2. Go to Online Store > Themes
  3. Click the “…” button on your current theme and select “Edit code”
  4. Look for the “Assets” folder and find the file named theme.css.liquid or custom.css.liquid or base.css
    • If there’s no custom CSS file, you may need to create one by clicking “Add a new asset” and naming it custom.css
  5. Add the CSS code above to the bottom of the file
  6. Save the changes

If your theme doesn’t load the custom CSS automatically, you may need to include it in your theme.liquid file:

  1. In the theme editor, look for the file layout/theme.liquid

  2. Find the closing tag

  3. Just before it, add this line:

    {{ 'custom.css' | asset_url | stylesheet_tag }}

  4. Save the changes

If you encounter any issues or need help adjusting the layout further, please don’t hesitate to reach out. I’m happy to help with any additional customization you might need, and all that for free :slightly_smiling_face:

Best regards,

Shubham | Untechnickle

5

Hey,

Thanks so much for replying. I figured so as there’s no layout option that enables the menu under the logo sadly. Do I message you?

6

Hey,

Thanks so much for taking the time to reply. I did this and unfortunately it didn’t work even when I put it in the theme liquid.

7

@MollieHammond - sure you can contact me on email below, did you enable hamburger menu?

8

Hi @MollieHammond

The Palo Alto theme uses a unique CSS structure for its header. It’s recommended to consult a developer to make the changes correctly, as modifying a paid theme can be risky if not done properly.