Increase header navigation width Impulse theme

Increase header navigation width Impulse theme

-DM
Excursionist
50 0 6

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

DM_0-1682549810568.png

Storefront link reference: https://v6yg4ghs78eo4d24-56250236962.shopifypreview.com

Replies 4 (4)

ZestardTech
Shopify Partner
5725 1050 1384

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;
} 
}

ZestardTech_0-1682571586652.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
-DM
Excursionist
50 0 6

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

-DM
Excursionist
50 0 6

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: 

DM_0-1682612987133.png

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?

ZestardTech
Shopify Partner
5725 1050 1384

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;
}

ZestardTech_0-1682657708744.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing