Create a Secondary menu as a section to add to a template

Store Design
, , , , ,

Topic summary

Goal: Add a secondary navigation menu for About/Help pages that looks like the top menu but only appears on selected pages, positioned under the header (not in the header).

Reference: Example provided from Sommerswim’s Returns & Exchanges page showing a black page-specific menu. A screenshot and link are central to understanding the desired layout.

Context: Store is a new, not-yet-live site (indiansummerthelabel.com). The user wants a reusable section in Shopify (a theme section that can be added to page templates) to host this menu.

Proposed step: A responder suggested adding CSS to main.css to change the header’s grid and move the inline menu area. This adjusts header layout but does not create a separate, page-level secondary menu.

Clarification: The requester needs a distinct menu section that can be added to specific page templates (e.g., About Us subpages), while leaving the global header unchanged.

Status: Unresolved. No code or steps yet for creating a dedicated section/snippet tied to a navigation menu and adding it to selected templates (potentially via a custom section, alternate templates, or metafields to select a menu per page).

Summarized with AI on December 23. AI used: gpt-5.
1

Hi everyone.

I want to create a secondary menu ‘about us’ page which will have several subheadings linking to different pages.

I want it to essentially look like the menu at the top but not show in the header, only be available on certain pages.

Anyone know how add / code this?

1 Like
2

This is what I am wanting. The black menu at the top. It is only available on these subheading’s pages.

https://www.sommerswim.com.au/pages/returns-exchanges

Screenshot 2024-08-01 at 5.28.24 pm.png
Screenshot 2024-08-01 at 5.28.24 pm.png2122×896 82.5 KB

3

Hi @ISTL

Would you mind to share your store URL? thanks!

4

Sure! However I’m working on a new website that isn’t live yet.

Www.indiansummerthelabel.com

5

its okay, do you mean like this right?

Made4uoRibe_0-1722517459692.png
Made4uoRibe_0-1722517459692.png1888×335 184 KB

if its okay, check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media screen and (min-width: 990px) {
    .header--middle-left {
        display: grid;
        grid-template-areas: 
            "heading icons"
            "navigation navigation";
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
    }
    .header__inline-menu {
        grid-area: navigation;
        text-align: center;
    }
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

Hello, thanks for the tip!

Does this make a second menu? I want the header to remain the same, however I want to be able to add a menu as a SECTION to any default page.

So it is to have my main header, but on a ‘about us’ page for example, has a new menu but underneath the header. Refer to image I sent above :slightly_smiling_face: