Sticky slide out tab

PRO

This hover-activated tab starts as a small icon and smoothly expands to show a text label — a simple way to add sticky actions without cluttering your design.

Copy

Unlock with Pro

Category

Code, Cursor & hover, Navigation

Built with

Widgets

Container, Heading, Image, Icon, Wordpress menu

Need help?

Custom code

CSS

Custom css

The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

/*Sticky slide out tab*/
.text {
    display: none;
}
.icontab {
    transition: width 0.7s ease;
}
.icontab:hover {
    width: 132px;
}
.icontab:hover .text {
    display: inline-block;
}