[Resolved] Make these containers clickable

[Carlo]

Hi there,

I need to make the 2 containers (the one purple and the one green) on the right clickable. (or, I need them to be buttons, as you prefer :))

I have tried some solutions in other topics but with no success.

How can I do?

Thank you.

Best wishes. Carlo

[Elvin]

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

A wise man once said:
"Have you cleared your cache?"

[Carlo]

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

[David]

Hi there,

change this:

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

to:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carlo]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carlo]

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

[Tom]

Hi there,

You can do something like this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carlo]

It works. Thank you guys 🙂

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts