[Resolved] Create custom category items and make sidebar in 2 collumns

Home Forums Support Create custom category items and make sidebar in 2 collumns

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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!

    #1125556
    David
    Staff
    Customer Support

    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.

    #1125748
    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!

    #1125764
    David
    Staff
    Customer Support

    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.

    #1125798
    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?

    #1125823
    David
    Staff
    Customer Support

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

    category-icon

    #1126392
    Santa

    Hi David! Have added the CSS classes to icons.

    #1126509
    David
    Staff
    Customer Support

    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;
    }
    #1127657
    Santa

    Thank you very much for your help David!

    #1127674
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.