Create custom category items and make sidebar in 2 collumns

[Santa]

Hello!

Could you please assist if it is possible to replace my current sidebar category text with icons ( possibly when hovering over – there is a text of the category?) Is it even possible?

Another thing- how to make these icons to be in 2 columns?

Thank you for your time, will be waiting for your thoughts!

[David]

Hi there,

i think that would require custom development – i had a look for category icon plugins and couldn’t see anything that would do this.

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

[Santa]

Hi David! Thank you for your answer!

I tried to achieve something like this, but using elementor icons. Can you please tell the direction on how to achieve text when hovering over the icon? ( in attached website, under the categories titles)

The goal is to use only icons and when hovering the mouse over an icon, text appears. Is it possible to achieve this with CSS?

Thank you!

[David]

You could construct a 2 column template in Elementor using their Icon Box widget and add this to the Right Sidebar. then i could take a look at the necessary CSS to hide text when its not being hovered upon.

One concern is that generic icons won’t have any alt or aria text applied to them – making them a pretty poor UX/UI for users with accessibility needs.

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

[Santa]

Thank you for your help David!

Have added two columns in the right sidebar and inserted two icons. The goal is to remove the current text under the icons and make the text appear when the mouse is hovering over the icon. Is it achievable with CSS?

[David]

Can you edit template, and on each of the Columns on the Advanced settings add a CSS class of:

category-icon

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

[Santa]

Hi David! Have added the CSS classes to icons.

[David]

The class needs to be added to the Column not the Icon. Once thats changed add this CSS:

.category-icon .elementor-widget-heading {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}
.category-icon:not(:hover) .elementor-widget-heading {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

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

[Santa]

Thank you very much for your help David!

[David]

You’re welcome

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

[Author]

Posts