Make Background Color Full Width in Dawn Theme Header Inline Menu

Store Design
1

Hi,

I am trying to get a full screen width background color on the inline menu on Desktop breakpoint. I have tried but failed because the parent element is a grid and has set values which doesnt allow for the menu to cover the whole screen. Any ideas?

The website is:

fraoulinofashion.myshopify.com

The Color of background I want is #9B9B9B and I need it to cover the whole screen.

2

Please put in below code to the last line of base.css

by going to your store admin > Online Store > Themes > Actions > Edit code > Assets folder. (https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code)

.header-wrapper {background-color: #9B9B9B;}

3

Hi @fraoulinofashio .

I am Richard Nguyen from PageFly - Advanced Page Builder.

Yo can go to Online Store => themes => Actions => Edit code and add this code on file base.css

.header-wrapper{
background-color: #9B9B9B !important;
}

Hope this helps.

Best regards,

Richard - PageFly

4

Hi,

Thank a lot for everyone’s time. I tried the line of code. However, it makes the whole header grey. I just want the inline menu to be in grey and cover the width of the screen (like shown in the screen below (red area)).

bar grey.png
bar grey.png1900×1022 260 KB

5

Please try below codes instead of my previous one.

Please note the search icon and other icons will span much further than now on a big screen.

.header-wrapper .page-width {
max-width: 100%;
padding: 0;
}.header-wrapper .header__icons {
padding-right: 1.5rem;
}.header-wrapper .header__search {
padding-left: 1.5rem;
}@media screen and (min-width: 750px){
.header-wrapper .header__icons {
padding-right: 5rem;
}.header-wrapper .header__search {
padding-left: 5rem;
}
}

6

Thank you very much. It worked perfectly.

7

@fraoulinofashio γειά σας

ευχαριστούμε για την δημοσίευση του ερωτήματος σας.

Για περαιτέρω αλλαγές και πληροφορίες μπορείτε να μας στείλετε inbox εδώ ή στο email μας.

Ευχαριστούμε