Okay
  Public Ticket #2957739
Fancy box hover on mobile
Closed

Comments

  •  5
    Lewis started the conversation

    Hello,

    I'm using Fancy Box > Colour box hover effect. Works great on desktop but on mobile/tablet obviously there's no rollover state as such as it's a 'tap' interaction.

    Is there a way for the hover state to appear as the default on mobile/tablet?

    Thanks

  •  1,877
    Judith replied

    Hi Mr L J Keogh,

    Thanks for writing to us.

    Please enable this option from the Salient > General Settings > Functionality section:

    7760772530.png

    Thanks.

  •   Lewis replied privately
  •  1,877
    Judith replied

    Hi Lewis,

    Please send in your admin login credentials so that we can check this out.

    Thanks.

  •   Lewis replied privately
  •  8,840
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 0px) and (max-width: 999px) {
        .nectar-fancy-box[data-style="color_box_hover"] .box-bg, .nectar-fancy-box[data-style="color_box_hover"]:after {
            opacity: 1 !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  5
    Lewis replied

    This is great and nearly there.

    It's just missing the other two changes:
    1) Font should change to white
    2) Border is hidden

    Many thanks

  •  8,840
    Tahir replied

    Use this revised CSS.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 0px) and (max-width: 999px) {
        .nectar-fancy-box[data-style="color_box_hover"] .box-bg, .nectar-fancy-box[data-style="color_box_hover"]:after {
            opacity: 1 !important;
        }
        .nectar-fancy-box[data-style="color_box_hover"][data-border="true"] .box-inner-wrap {
            border: none !important;
        }
        .nectar-fancy-box[data-style="color_box_hover"] .inner-wrap * {
            color: #fff !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  5
    Lewis replied

    Tahir, you're a legend, thank you!

    Thanks to Judith also

    Have a good weekend