Site logo

[Resolved] Hide site name but show description on hover

Home Forums Support [Resolved] Hide site name but show description on hover

Home Forums Support Hide site name but show description on hover

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1904796
    Mihail

    Hello everyone! 🙂

    Could you please help me to implement the following:
    I want the site name to disappear when hovering over in the logo area (main-title), but its description (site-description) is shown.

    Something similar was done in Niche, when you hover over the product card, the price disappears, but the add to cart button appears.

    #1904891
    Elvin
    Staff
    Customer Support

    Hi there,

    Assuming you’re using the default structure, you can try this CSS:

    .site-logo:hover + .site-branding .main-title {
        display: none;
    }
    #1905189
    Mihail

    I want to make animation like here:
    https://gpsites.co/niche/shop/

    Namely, like this:
    https://prnt.sc/1qfjjip
    https://prnt.sc/1qfjkdb

    #1905301
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site where the Site Title and Description are both being displayed and i can see what is possible.

    #1905395
    Mihail

    No problem 🙂

    #1905584
    David
    Staff
    Customer Support

    Give this CSS a shot:

    .site-branding-container:hover .main-title,
    .site-branding-container .site-description {
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s ease-in;
    }
    
    .site-branding-container:hover .site-description {
        transform: translate3d(0,-100%,0);
        opacity: 1;
    }
    #1905698
    Mihail

    Exactly what is needed! Thanks David 😉
    But there is one BUT: is it possible to make the description clickable?

    #1905715
    David
    Staff
    Customer Support

    Add this CSS to make the entire container clickable:

    .site-branding-container {
        position: relative;
    }
    
    .main-title a:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    .site-description {
        pointer-events: none;
    }
    #1905726
    Mihail

    David, you are the coolest!
    Thank you very much, this is what need me 🙂

    #1906474
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.