- This topic has 9 replies, 2 voices, and was last updated 3 years ago by
David.
-
AuthorPosts
-
January 8, 2020 at 4:58 am #1125475
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!
January 8, 2020 at 6:41 am #1125556David
StaffCustomer SupportHi 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/January 8, 2020 at 7:09 am #1125748Santa
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!
January 8, 2020 at 7:19 am #1125764David
StaffCustomer SupportYou 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/January 8, 2020 at 7:40 am #1125798Santa
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?
January 8, 2020 at 7:57 am #1125823David
StaffCustomer SupportCan 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/January 8, 2020 at 11:00 pm #1126392Santa
Hi David! Have added the CSS classes to icons.
January 9, 2020 at 2:34 am #1126509David
StaffCustomer SupportThe 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/January 10, 2020 at 3:42 am #1127657Santa
Thank you very much for your help David!
January 10, 2020 at 4:13 am #1127674David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.