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;
}
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024