How can I alter the shape of my website's navigation menu?

Store Design
, , , , , , ,

Topic summary

A user seeks to modify their Shopify store’s navigation menu layout to display horizontally in a condensed format, similar to a reference example.

Solution Provided:
Multiple contributors suggest adding CSS code to the assets/component-mega-menu.css file:

  • Initial fix: Apply display: flex to .mega-menu .mega-menu__list--condensed
  • Centering adjustment: Add max-width: 100% and padding-inline: 5rem properties
  • Final alignment: Include margin: 0 0 0 20px to .mega-menu .mega-menu__content.page-width

Current Status:
The original poster confirmed the solution worked. However, a new participant reports they cannot locate the component-mega-menu.css file in their assets folder, suggesting theme variation may affect file structure.

Key Detail: Screenshots were shared showing the current menu state and desired outcome, which are central to understanding the layout changes.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello! How can I change the navigation menu shape on my website? Here’s a link to my website & picture on how I want it to be.

Thank you in advance!

My navigation menu: https://prestigestraps.com / password: asd321

navigationps.jpg
navigationps.jpg1307×332 13.1 KB

How I want it to look: https://mrabshow.com

navigationab.jpg
navigationab.jpg1552×107 15.2 KB

2

hi @kitchencrafted

You can try follow this path:
Themes => edit code => asset => component-mega-menu.css
and add this code to bottom of the file component-mega-menu.css

.mega-menu .mega-menu__list--condensed{
display: flex;
}
3

@kitchencrafted

Please add the following CSS code to your assets/component-mega-menu.css bottom of the file.

.mega-menu .mega-menu__list--condensed {display: flex !important;}

Thanks!

4

Hello! Thank you for your solution! Can you center them from where the orange line is?

Screenshot_5.jpg
Screenshot_5.jpg1895×180 16.2 KB

5

Hello! Thank you for your solution! Can you center them from where the orange line is?

Screenshot_5.jpg
Screenshot_5.jpg1895×180 16.2 KB

1 Like
6

@kitchencrafted
Replace the code above with this

.mega-menu .mega-menu__list--condensed {
  display: flex;
  max-width: 100%;
  padding-inline: 5rem;
}
7

@kitchencrafted

Please add the following CSS code to your assets/component-mega-menu.css bottom of the file.

.mega-menu__content .page-width {margin: 0 0 0 20px !important;}

Thanks!

8

Thank you so much! :hugs:

9

Hi there, I have the same issue but there is no component-mega-menu.css under assets. Where could it be?