How can I make a full-width header with 2% padding?

Store Design
1

Hi all,

Asking some help to make the header of the page full width, maybe with 2% left and right padding. I’m using the

wa re house the me

Thank you

2

Hi @Filipe2121

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

yes, https://logosindustrias.co.mz/ pass: yoweib

4

Thank you for the infromation. Just clarification it for desktop screen right?

You mean like this?

Made4uoRibe_0-1694807736194.png
Made4uoRibe_0-1694807736194.png1339×235 16.7 KB

If it is try this one then.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
header.header.header--inline .container {
padding-left: 0px;
padding-right: 0px;
}
  • And Save.
5

Thank you, but unfortunately is doesn’t work. There’s something blocking the change.

This is the header code on the theme.css

  • HEADER

*/

.header {
position: relative;
padding: 13px 0;
background: var(–header-background);
color: var(–header-text-color);
transition: margin-bottom 0.25s ease-in-out;
}

.header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.header__inner–centered {
justify-content: center;
}

.header__logo-link {
display: block;
}

.header__logo {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
}

.header__logo-image {
display: block;
vertical-align: middle;
max-height: 130px;
}

.header__mobile-nav {
display: inline-block;
margin-right: 20px;
}

.header__desktop-nav {
position: relative;
margin-right: 22px;
}

.header__mobile-nav-toggle {
top: -1px; /* Slight alignment for pixel perfect :grinning_face_with_smiling_eyes: */
}

.header__desktop-nav-toggle {
height: 44px;
padding: 0 15px;
border: 1px solid var(–header-border-color);
border-radius: 3px;
font-weight: var(–text-font-bolder-weight); /* Safari 10 does not allow using flexbox on button… so we have to use an additional wrapper */
}
.header__desktop-nav-toggle > span {
display: flex;
align-items: center;
}

.header__desktop-nav-text {
position: relative;
top: 1px; /* Slight alignment for the pixel perfect */
}

.header__search-bar-wrapper {
flex: 1 0 auto;
}

.header .icon–account,
.header .icon–hamburger,
.header .icon–hamburger-mobile,
.header .icon–search,
.header .icon–cart,
.header .icon–close {
display: block;
}

.header .icon–account {
width: 20px;
height: 22px;
}

.header .icon–hamburger {
width: 20px;
height: 14px;
}

.header .icon–hamburger-mobile {
width: 20px;
height: 16px;
}

.header .icon–cart {
width: 27px;
height: 24px;
}

.header .icon–search {
width: 22px;
height: 22px;
margin: 0 auto;
}

.header .icon–close {
width: 19px;
height: 19px;
}

6

If its not working try this one, please replace it.

Same instruction.

header.header.header--inline .container {
padding-left: 0px !important;
padding-right: 0px !important;
}

Thanks!

7

Still nothing, I was doing some trials and found this that’s affecting all of the containers, and if i switch the values it changes the width of the header but also from all the containers

.container {
max-width: 1480px;
margin-left: auto;
margin-right: auto;
padding: 0 var(–mobile-container-gutter)

Any other suggestion?

Thank you

8

After a many trials i use the following:

/* Target the header with class header–inline */
header.header.header–inline .container,
.shopify-section.shopify-section_header .container {
padding-left: 5%;
padding-right: 5%;
}

/* Reset the styles for the global .container class within the header /
header.header.header–inline .container,
.shopify-section.shopify-section_header .container {
max-width: initial; / Reset max-width /
margin-left: initial; / Reset margin-left /
margin-right: initial; / Reset margin-right */
padding-left: 5%;
padding-right: 5%;
}

It’s working, and i can change the padding values. But I’m having difficulties trying to do the same changes to the class=“nav-bar”>class="nav-bar_inner because it has the same global “container”.

9

To all that might interest, this was the final solution. Had to create an exception, because of the global ‘container’ inside, the header and nav-bar.

/* Target the header with class header–inline */
header.header.header–inline .container,
.shopify-section.shopify-section_header .container {
padding-left: 5%;
padding-right: 5%;
}

/* Reset the styles for the global .container class within the header /
header.header.header–inline .container,
.shopify-section.shopify-section_header .container {
max-width: initial; / Reset max-width /
margin-left: initial; / Reset margin-left /
margin-right: initial; / Reset margin-right */
padding-left: 5%;
padding-right: 5%;
}

/* Target the .container class within .nav-bar__inner and .shopify-section_header */
.nav-bar__inner .container,
.shopify-section.shopify-section_header .container {
padding-left: 5%;
padding-right: 5%;
}

/* Reset the styles for the global .container class within these contexts /
.nav-bar__inner .container,
.shopify-section.shopify-section_header .container {
max-width: initial; / Reset max-width /
margin-left: initial; / Reset margin-left /
margin-right: initial; / Reset margin-right */
padding-left: 5%;
padding-right: 5%;
}