How do i make this bar in the header go all the way to both sides

Solved

How do i make this bar in the header go all the way to both sides

Miguel3403
Tourist
21 0 2

Miguel3403_0-1708947246090.png

I cant make it fill the margins on the right and left.

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 519

This is an accepted solution.

The value " padding: 0 100px !important;" , just reduce the 100 to something you are comfortable with.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2139 616 519

Hey @Miguel3403,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    .header__inner {
        max-width: 100% !important;
    }
    
    .header__row.header__row-desktop.lower.three-segment {
        padding: 0 100px !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708948588780.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Miguel3403
Tourist
21 0 2

Thanks it seems to have worked do you also have any idea to now make the icons go the left and right a bit more 

Miguel3403_0-1708948905385.png

 

ThePrimeWeb
Shopify Partner
2139 616 519

This is an accepted solution.

The value " padding: 0 100px !important;" , just reduce the 100 to something you are comfortable with.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Miguel3403
Tourist
21 0 2

Its seems to be mostly working but when i hover above the last two header menus the big margin to the right of the page seems to comeback 

Miguel3403_0-1708950242254.png

 

ThePrimeWeb
Shopify Partner
2139 616 519

Try this, 

 

Just change the 100 value back to whatever you want. 

<style>
@media only screen and (min-width: 990px) {
    .header__inner {
        max-width: 100% !important;
    }
    
    .header__row.header__row-desktop.lower.three-segment {
        padding: 0 100px !important;
    }    

    .shopify-section.shopify-section-group-header-group.header__outer-wrapper {
        overflow-x: clip !important;
    }
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!