How can I adjust left side space to increase header width in Debut theme?

Solved

How can I adjust left side space to increase header width in Debut theme?

Ulysse1300
Pathfinder
149 0 51

Hey, 

 

I would like to know how could I manage the space on the left side of ''shop'' in order to increase the width in the header. 

Thanks. 

 

Link : https://relentless-clothingz.myshopify.com

 

Capture d’écran 2022-02-12 à 00.32.31.png

Accepted Solutions (2)
Oxifytech
Shopify Partner
42 1 4

This is an accepted solution.

You can refer this screenshot also to check how to add the code 

https://monosnap.com/file/CGTZgXiEaJwIc2IniG8WPhTlGjezVV

Padmapriya A,
Full stack Developer, 8 years Experience

View solution in original post

made4Uo
Shopify Partner
3849 717 1193

This is an accepted solution.

Hi @Ulysse1300 ,

 

As what I understand, you want to move the SHOP llink, which part of the header to the left? If so, find the theme.css file under the Assets folder and add the code below. Adjust the margin-left accordingly. 

 

.site-nav list--inline {
margin-left: -20px !important;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 9 (9)

Oxifytech
Shopify Partner
42 1 4

Hi Ulysse1300,

There wont be any way to handle this from customizer, 

But we can do something with code, 

 

Padmapriya A,
Full stack Developer, 8 years Experience
Ulysse1300
Pathfinder
149 0 51

Thanks for the answer. 

 

What type of code should I add ? 

Oxifytech
Shopify Partner
42 1 4

CSS code, Is it possible to give access to the themes sections, I wont do anything in live theme, will do fix in a backup theme,

Padmapriya A,
Full stack Developer, 8 years Experience
Ulysse1300
Pathfinder
149 0 51

If you don't want to give me the code there no problem, but I prefer not to give access to my theme to a new member here. 
Thanks again for the help. 

Oxifytech
Shopify Partner
42 1 4

If you reduce this 55px, It will bring you less space in both the sides, 

If you asking me to reduce only one side, that wont look good, 

If you still need then I will suggest that too 

 

https://monosnap.com/file/tmSlm5wtlDHVXBOXIQ1TZT2P2HnkZO

 

 

@media only screen and (min-width: 750px)
{ .site-header { padding: 55px; }}
 
change this 55px to 30px or 20px. as less as you need
Padmapriya A,
Full stack Developer, 8 years Experience
Oxifytech
Shopify Partner
42 1 4

This is an accepted solution.

You can refer this screenshot also to check how to add the code 

https://monosnap.com/file/CGTZgXiEaJwIc2IniG8WPhTlGjezVV

Padmapriya A,
Full stack Developer, 8 years Experience
Ulysse1300
Pathfinder
149 0 51

Thanks for the help, It works really well. 

Ligeki11
Visitor
1 0 0

9.png

made4Uo
Shopify Partner
3849 717 1193

This is an accepted solution.

Hi @Ulysse1300 ,

 

As what I understand, you want to move the SHOP llink, which part of the header to the left? If so, find the theme.css file under the Assets folder and add the code below. Adjust the margin-left accordingly. 

 

.site-nav list--inline {
margin-left: -20px !important;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free