White box that extends all along my site-header on debut theme after having changed the header color

Hi everyone,

I have recently decided to change the color of this site header, and a white box appeared starting from one side of the site all the way to the other side until the end of the cart logo.

In mobile view, the box completely overtakes the design and does not even show the actual color of the header, instead it shows full white header.

I would also like to align the “Search”, “Account” and “Cart” logos to the main menu items on the header (I do not want them aligned with the logo as it currently is).

I would really appreciate some help with that please.

Info:

I changed the site header using the below coding:

.site-header {background-color: #F0DFCC !important;}
.site-footer {background-color: #F0DFCC !important;padding-top: 30px;}

Site name:

https://mimisbeauty.me/

@G_21

do you mean like this?

Hello @KetanKumar ,

yes this is exactly what I mean, I know that my logo is not background-less but I will make it so that it all blends in.

Please share with me your coding.

thank you very much

@G_21

thanks for confirm yes please use this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.site-header__mobile-nav {background-color: #f0dfcc;}
.site-nav--centered {
    padding-bottom: 22px;
    background: #f0dfcc;
    margin: 0;
    padding-top: 22px;
}

@KetanKumar

Thank you very much!

@KetanKumar

Do you have any feedback concerning the second part of message?

I would also like to align the “Search”, “Account” and “Cart” logos to the main menu items on the header (I do not want them aligned with the logo as it currently is).

In addition, I would like to have that section (Menu + search, account and cart logos) on a white background, but keep the higher and bigger part of the header in its current color.

Thank you again

@G_21

yes please check your theme setting may be allow this