M2 how to add a custom css only to a module override?

magento.stackexchange https://magento.stackexchange.com/questions/289969

  •  13-03-2021
  •  | 
  •  

Question

I need to apply this code to checkout page:

.header-wrapper-content.sticky-menu.active{display:none;}
.hdmx__contact-button.hdmx__contact-button-right{display:none;}

This hide the sticky menu and the float contact us module from the checkout.

How can I apply this only to the checkout page?

I already tried to create "app/design/frontend/your-store/your-theme/Magento_Checkout/web/css/source/_extend.less"

where "_extend.less" file contains the CSS above, but in this way, the style is applied to the whole site.

I need to have that code only on during checkout.

Was it helpful?

Solution 

body[class^="checkout"] {
    .header-wrapper-content.sticky-menu.active,
    .hdmx__contact-button.hdmx__contact-button-right {
        display:none;
    }
}

This will only apply the CSS selector to pages that come from actions within the checkout-module

OTHER TIPS

1.If your have extend your theme from Luma theme then copy below file, 

From : \vendor\magento\theme-frontend-luma\Magento_Checkout\web\css\source\module\checkout\_checkout.less

to 
\app\design\frontend\Package\theme\Magento_Checkout\web\css\source\module\_checkout.less

add your custom css code into this file

2.By adding your custom css file

You can add your custom css file for checkout page only with below step Create custom_checkout.css file into your theme Path

/app/design/frontend/Package/theme/web/css/custom_checkout.css

Call your custom css in <head> tag of the  XML layout handles of the checkout page

File:Path : \app\design\frontend\Package\theme\Magento_Checkout\layout\checkout_cart_index.xml

Put below code ino above XML file.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
            <head>
                   <css src="css/custom_checkout.css" />
            </head>
    </page>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top