How can I change the menu bar color in the Debut theme?

Store Design
, ,
1

Capture shop.JPG
Capture shop.JPG1790×819 182 KB

Hello! Does anyone know if it is possible to add a block of colour behind the menu and basket in debut so it stands out. I have indicated what I mean in the above photograph.

Thank you

2

Hi @heatherlucyj

I’m Kate from PageFly - Landing Page Builder, I’d like to suggest this idea:

Step 1: You go to Online store → Theme → action → Edit code and choose file header.liquid.

Step 2: You find two class class=“site-header__mobile-nav” and class=“site-header”.

Step 3: Before you add css inline style=“background-color: your-color !important;”.

PageFlyKate_0-1675450477592.png
PageFlyKate_0-1675450477592.png1032×390 51 KB

3

thank you, a bit stuck on Step 2 - could you go through in more detail?

4

Hello @heatherlucyj

I would like to give you the recommendation to support you so kindly follow steps below:

  1. Go to your Online store > Themes > Edit code
  2. Open your theme.liquid file
  3. Paste the below code before 
#shopify-section-header .site-header { 
background-color: #0090FC !important;
}
#shopify-section-header .site-header .site-header__mobile-nav { 
background-color: #0090FC !important;
}

I hope the above is useful to you.

Best regards,
GemPages Support Team