I am attempting to change the background color of the panel header in Luma. I want the entire header area (everything above the navigation bar) to be black. I found this similar question, which helped, but did not fix the entire issue. I included it below for reference.

I still have a huge white area that I want to be black and I can't figure out which element I need to add a style tag for. I inspected the elements and found and changed the page-wrapper, panel wrapper, and panel header to set them black. None of those items seem to be the white area. I can't figure out what the element is called or how to fix it. I'm editing this in the ADMIN > CONTENT > Design > CONFIGURATION area.

Magento 2 page-header background color

A picture of what I'm trying to change (the white and gray parts): enter image description here Any advice would be super helpful. I'm a beginner and I'm just trying to get the hang of it. I'm mainly wondering if I am completely missing the element name or if there's something else I need to change.

Here is a link to the store: http://ec2-52-14-7-55.us-east-2.compute.amazonaws.com/

This is what I currently have in the configuration area:

<style type="text/css">@media (min-width: 768px), print {

.page-header {
   background-color: black
.panel-header {
   background-color: black

1 Answer 1


In order to change the color of that header use the following code:

 background-color: #000;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.