A store owner using the Impulse theme wants to increase the header navigation width while keeping the logo centered and moving navigation items closer to the page edges, without affecting overall page width.
Initial Solution:
A CSS code snippet was provided targeting .page-full, .page-width with padding: 0 at a minimum width of 769px
This successfully widened the header navigation as requested
Issue Encountered:
The code unintentionally affected navigation drawer layouts, changing their alignment
The store owner asked if the code could be made variable or more targeted to only affect the header
Updated Solution:
A refined CSS snippet was provided specifically targeting .site-nav__dropdown.megamenu.text-left .page-width with padding: 0 40px
This appears to address the navigation drawer alignment issue while maintaining the desired header width
The discussion includes screenshots demonstrating the desired outcome and the drawer layout problem. The solution involves custom CSS modifications to the theme.css file.
Summarized with AI on November 21.
AI used: claude-sonnet-4-5-20250929.
We are making a new version for our storefront, and would like to change the width of the navigation items on the header. We would like to keep the logo centered as is, and move the content on its left and right farther to the edges of the page. The store uses Impulse theme, and we were hoping the header width could be changed without changing the whole page width if possible.
Hey Zestard, Thank you for your response, it works perfectly! I was wondering if there was a way to manipulate that code so that we can change the width more, or a way to variable change the width? Unless that is the only code that works for the header
There is some other code I put in before that affected the drawer, but when we added the code snippet you mentioned, it made the alignment go differently?