Nav, main menu header

Technical Q&A
, ,

Topic summary

A user is experiencing an issue where their navigation bar’s background color doesn’t extend to the full width of the page, leaving uncovered space on the left and right sides.

Proposed Solutions:

Multiple respondents provided CSS-based fixes with similar approaches:

  • Add custom CSS code to the theme.liquid file (either above </head> or before </body>)
  • Target the header element with styling that includes:
    • max-width: 100% !important
    • margin: unset !important

The solutions aim to override the theme’s default width constraints on the header/navigation element.

Note: The actual CSS code snippets in the responses appear corrupted or reversed in the original text, but the general approach involves modifying the theme’s liquid file with custom styling to force full-width coverage.

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

Hello,
I want to make full background only on nav bar,
but It not cover the full width,

Sohan2198_0-1719252249887.png

left and right space also cover with same color
https://1iumgu89tzn68o14-58506346583.shopifypreview.com

best,
Sohan

2

Hey @Sohan2198

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1719252557408.png
Moeed_0-1719252557408.png1916×887 334 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @Sohan2198

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

header.header.header--top-left.header--mobile-center.page-width.header--has-menu.header--has-social { margin: unset !important; max-width: 100% !important; }

techlyser_web_0-1719252962919.png
techlyser_web_0-1719252962919.png1365×629 640 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4

Hi @OwenTheOrdinary

This is Theodore from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Theodore | PageFly