Inline nav menu width/margin problem- Dawn

Store Design

Topic summary

A user modified the Dawn theme to create an inline navigation menu using code from another community member. The menu exhibits unstable width behavior and creates unwanted gaps on both sides, along with a horizontal scrollbar.

Current approach:

  • Manually adjusting width percentage (currently set to 109%) in base.css
  • Changes don’t persist—width keeps reverting after other modifications are made

Attempted solution:
Another user suggested adding header.header{max-width: 100% !important;} to the end of base.css, but this did not resolve the issue.

Status: The problem remains unresolved. The discussion is ongoing with no working solution yet identified.

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

Hello I had modified dawn theme with an inline nav menu ( code taken from another user here) but the menu width keeps changing on me and there’s a gap on both sides and scroll bar on the bottom to move it side to side, I keep manually tweaking the percentage in the code but somehow after making changes it moves and I have to change the % value again. can someone help me with this? base.css code I play around with is this…

nav.header__inline-menu { background: #a1aec4 !important; width: 109% !important; text-align-last: center; }

test123

Screenshot (577).png
Screenshot (577).png1920×315 144 KB

1 Like
2

@Lavished

please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

header.header{max-width: 100% !important;}
3

does not work. :frowning: