0

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.

Improve this question
2
  • you can only achieve this by specifying your selector
    – Philipp Sander
    Sep 17, 2019 at 15:06
  • Could you please be more specific? I have not understood your reply.
    – Silver
    Sep 17, 2019 at 16:38

2 Answers 2

Reset to default
2 
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

Improve this answer
1
  • It works as expected!
    – Silver
    Sep 18, 2019 at 13:22
0

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>
Improve this answer
2
  • The point 2 is not working, the custom CSS is applied to the whole site, home page too.. I'm going to test the point 1 and let you know.
    – Silver
    Sep 18, 2019 at 12:14
  • Nor the point 1 working, it apply the styles all over the website.
    – Silver
    Sep 18, 2019 at 13:11

Your Answer

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

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