How can I create a full-width header with the dawn theme?

Store Design
,
1

I am looking to make my header full-width so that the background color I added to my inline menu is full-width. I have added it to the custom CSS but I still cannot find where it is being overridden at. When I asked Bard/Google AI it says there is a max width of 1440 being pulled but when I check the base.css file I cannot find it.

2

Hi @krixizzle , can you share your store url?

3

https://thesewleopard.com/?_ab=0&_fd=0&_sc=1

4

@krixizzle , go to base.css and add the following code :

@media (min-width:990px){

  .header {
    padding-top: 0px;
    padding-bottom: 0px;
    max-width: 100%;
    padding-left: 3px;
    padding-right: 3px;
}

}
5

Where do i place this? At the end or near the other header properties?

6

@krixizzle , at the end of base.css file.

7

Added! I do not see it fixed though.

8

oh actually I do, it looks like the inline menu I have add a background to that is now not full width is there any way to get that adjusted?

9

@krixizzle , Add the following code :

@media (min-width:990px){
.header {
    
    padding: 0 !important;
}

}

Result:

Abdosamer_0-1704931260687.png
Abdosamer_0-1704931260687.png1919×284 28.7 KB

10

Just being a little extra since that worked perfectly, is there anyway i can change the font to white and make the hover stay white just bold while active?

11

@krixizzle , Add the following code :

span.header__active-menu-item {
    color: #fff !important;
}

span.header__active-menu-item:hover{

  font-weight:600 !important;
}
.header__menu-item span {
   
    color: #fff !important;
}
12

You are amazing! Thank you so much for all your help!

13

@krixizzle , You’re very welcome.