Impulse Theme Navigation Dropdown Spacing

Store Design

Topic summary

Goal: Show four top-level links (Road, All Road, Gravel, Mountain) in a single row within the Impulse theme’s navigation dropdown; the fourth currently wraps to a second line.

Context: The menu previously displayed differently after outside help; current CSS location/change is unclear. “Coming Soon” is a child placeholder for “All Road,” not intended to force a new line. Screenshots were shared; a view of the admin navigation setup was requested. Images are central to understanding the layout.

Proposals:

  • CSS approach: Add to theme CSS (base.css/style.css/theme.css): .text-center .megamenu .grid .grid__item { display: inline-flex; gap: 40px; } to align items on one row and control spacing.
  • Structural approach: Adjust the Liquid (Shopify’s templating language) for the header/megamenu, as a pure CSS fix may break or not persist when navigation items change.

Status and next steps: No confirmation that the CSS fix resolved the issue. Further inspection of the menu structure in the admin and likely Liquid template changes are suggested for a durable solution. Discussion remains open without a final resolution.

Summarized with AI on January 21. AI used: gpt-5.
1

Hi All,

Site link: www.stinnerframeworks.com

In the navigation drop down, I want to get links (Road, All Road, Gravel, Mountain) all on the same row. Right now I can only get three across before it pushes the 4th link down.

At one point, we had someone helping us that changed this, but I can’t find where to adjust it.

I know its a spacing issue, but I can’t for the life of me figure out how to change it in the CSS.

Does anyone have any recommendations on what I should be changing to adjust the spacing?

Thanks.

1 Like
2

What does your navigation look like? Could you share an image?

3

Hi @aaronstinner

Do you mean like this? If it is try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.text-center .megamenu .grid .grid__item {
    display: inline-flex;
    gap: 40px;
}

I hope it help.

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

4

Screenshot 2023-08-21 at 2.49.04 PM.png
Screenshot 2023-08-21 at 2.49.04 PM.png1508×382 102 KB

Road, All Road, Gravel and Mountain are the main links under Bike, but Mountain is being pushed to a second row.

5

I mean in the backend, from the admin panel.

6

I reckon “Coming Soon” is a child, and has to be on the second line.

7

Like this?

Screenshot 2023-08-21 at 2.54.24 PM.png
Screenshot 2023-08-21 at 2.54.24 PM.png641×776 30.2 KB

8

correct. Sorry, thats confusing. I’m trying to use it as a placeholder since “All Road” is not ready for launch

9

This definitely needs some changing in Liquid code, because whatever CSS I write to fix this, it won’t carry forward when you make changes to the navigation or header.