I want to change the background color to black on luma theme page-header. i am using luma as my default template - what is the best way to go about? - I am using github version fresh Magento 2 install, the templates are store in frontend/Magento/Luma - firebug directs me to {.page-header} pub/static/frontend/Magento/luma/en_US/css/styles-l.css


The easiest way to add simple styling to a magento 2 store is to add your code here:


Click Edit for the appropriate view (global, website or store) and Theme (in your case Luma):

Open tab HTML Head, under Scripts and Style Sheets, you can add the following:

<style type="text/css">
@media (min-width: 768px), print {
 .page-header {
   background-color: black

Click Save Configuration

Clear Cache

| improve this answer | |
  • 1
    And if you only want to change the grey bar at the top <style type="text/css">@media (min-width: 768px), print {.page-header .panel.wrapper {background-color: #39c} </style> – dawhoo Apr 26 '17 at 21:04

For the sake of simplicity you can try to change the color in app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less:

@header__background-color: @color-black;
@header-panel__background-color: @color-black;

then clear pub/static and var/view_preprocessed directories and subdirectories, except for pub/static/.htaccess.

though this direct change is obviously discouraged. You need to create a custom theme.

| improve this answer | |
  • 1
    _module.less? this file is not part of web/css/source – roger Feb 16 '16 at 22:48
  • github.com/magento/magento2/blob/develop/app/design/frontend/…. this less file will be used to create css. Have you already tried to change it? – Arkadii Chyzhov Feb 16 '16 at 22:52
  • found the _module.less - it did not work.. deleted var/view_preprocessed, cache and pub/static/ also php bin/magento setup:static-content:deploy – roger Feb 17 '16 at 2:00
  • I was able to achieve by adding background-color: #000; under .page-header { ....the above method didnt work. is it possible to call in image as my background from there ? – roger Feb 17 '16 at 15:21
  • i tried this to _module.less, background-image: url("@{base-url}/images/bg.png"); it didnt work - any suggestions – roger Feb 17 '16 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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