Make these containers clickable

Hi,

To make clickable containers from GB's container block, you can follow David's answer here:
https://generatepress.com/forums/topic/how-would-i-make-a-clickable-container-with-gb/page/2/#post-1481880

Hi Elvin,

tried it.

But Now the whole page hero is clickable while only each button is meant to be clickable.

How could I fix it?

What I did:
added the following css:

.gb-container.clickable-container a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

.gb-container.clickable-container .gb-inside-container {
    position: initial;
}

added the class clickable-container to each clickable container

Thank you. Carlo

Hi there,

change this:

.gb-container.clickable-container .gb-inside-container {
    position: initial;
}

to:

.gb-container.clickable-container > .gb-inside-container {
    position: relative;
}

Thank you David, it works!
Is it possible to make the svg icons in those containers change color on hover as well?
i.e. red

You're SVG icons contain their own inline CSS and CSS style sheets - you would need to edit the SVG remove the styles and the set its fill attribute to currentColor

Then it can be styled with some CSS.

Great, I have just modified them (I hope I did it right)
What's the css to add? :)

Hi there,

You can do something like this:

.clickable-container:hover .gb-icon {
    color: red;
}

It works. Thank you guys :)

You're welcome :)