Shopify themes, liquid, logos, and UX
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.
here is a reference of what we would like to do
Storefront link reference: https://v6yg4ghs78eo4d24-56250236962.shopifypreview.com
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset->theme.css and paste this at the bottom of the file:
@media only screen and (min-width: 769px){
.page-full, .page-width {
padding: 0;
}
}
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
I did not notice this before, but when the code was added to the website, it also changed the layout of the navigation drawers, it looks like this:
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?
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset->theme.css and paste this at the bottom of the file:
.site-nav__dropdown.megamenu.text-left .page-width {
padding: 0 40px;
}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025