Magento – Magento 2 page-header background color

cssheadermagento2

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

Best Answer

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

ADMIN > CONTENT > Design > CONFIGURATION

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
}
</style>

Click Save Configuration

Clear Cache

Related Solutions

Magento – magento 2 header

go to

frontend/Magento/luma/web/css/source/_theme.less

override the css by simple adding these line

.logo {
   img {
     max-height: inherit;
    // add here you want to add just like css
   }
}

for adding the background in header

.page-header {
    background-color: #000;
}

for adding the background image

.page-header {
    background-image: url("../images/cart_prod1.jpg");

     }

Magento – CSS Not Reflecting in Magento 2

Create your theme on below path given instead of vendor folder

app\design\frontend\vendor\themename

and apply theme from admin and clear cache, whenever you add new files in your theme you need to deploy static content from cmd command given below.

php bin/magento setup:static-content:deploy

Best Answer

Related Solutions

Magento – magento 2 header

Magento – CSS Not Reflecting in Magento 2

Related Topic