Change the class of a container only on a specific page

Magento 2 Frontend Design
1

So I have this container defined in the default.xml file (the one that overrides the default layout of the Magento_Theme module):

<Vendor>
       |----<Theme>
                   |----Magento_Theme
                                 |----layout
                                           |----override
                                                     |----base
                                                              |----default.xml

and I would like to add some specific class only when we are in the homepage ("/" or “/home”).

This “container” has a name attribute of “header.top-section.wrapper” and I’ve tried to add this:

<referenceContainer name="header.top-section.wrapper" htmlClass="top-section-wrapper home-transparent" />

in Content -> Pages -> My Home Page -> Design -> Layout Update XML and I still can’t see any difference as this doesn’t seem to work.

This is killing me as I can’t find anything anywhere on how to solve this…

2

Make sure you clear both of these Cache Types when playing with XMLs:

  • Layouts
  • Blocks HTML output

Most people just clear the Page Cache but that isn’t enough by itself.

3

Do you know how can I clear both caches through the command line?

4

To clear Layouts, Blocks HTML output and Page Cache use the following:

bin/magento cache:clean layout block_html full_page
5

Great, thanks! I’ll try that tomorrow and let you know if it worked!

6

I’ve done it 100 times. Worked on something to do with Blocks and lose my mind that something should work but doesn’t… Then turns out that I’m only clearing the Cache and not the Layout/Blocks. I hope your issue is as simple as that.