Okay
  Public Ticket #2809541
Dot Navigation not visible on Mobile when set to Tooltip Alt
Closed

Comments

  •  23
    alberteck started the conversation
    June 23, 2021 at 1:56pm

    Hi!

    When I have Dot Navigation set to "Tooltip Alt", on desktop, we get the Alt variant of the navigator, however on mobile, we get nothing (hidden).

    On the other hand, when Dot Navigation is set to "Tooltip" or "Transparent", we get non navigator on mobile as well.

    How could I have the Dot Navigator set to to "Tooltip Alt" on desktop, but at least have the normal "Tooltip" visible on mobile?

  •  8,860
    Tahir replied
    June 23, 2021 at 2:02pm
    Hey, Please provide the page URL so I may write up the custom CSS for this request. Thanks

    ThemeNectar Support Team 

  •  1,882
    Judith replied
    June 23, 2021 at 2:02pm

    Hi Alberteck,

    Please send in your website url.

    Thanks.

  •   alberteck replied privately
  •  1,882
    Judith replied
    June 23, 2021 at 2:12pm

    Hi Alberteck,

    Please enable right click for us to be able to inspect your page and provide css for it.

    Thanks.

  •  8,860
    Tahir replied
    June 23, 2021 at 2:14pm

    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 screen and (max-width: 782px) {
    #fp-nav.tooltip_alt {
        display: block !important;
    }
}    

    Thanks

    ThemeNectar Support Team 

  •  23
    alberteck replied
    June 23, 2021 at 2:33pm

    Holy shit you guys are quick! This is one of the main reasons why I love Salient!

    The CSS provided worked! However, is it possible to have "Tooltip Alt" for desktop and "Tooptip" or "Transparent" for mobile?

  •  1,882
    Judith replied
    June 23, 2021 at 2:49pm

    Hi Alberteck,

    Please try this css:

    @media screen and (max-width: 782px){
    #fp-nav.tooltip_alt {
        background-color: transparent;
    }
}

    Thanks.

  •  23
    alberteck replied
    June 23, 2021 at 2:56pm

    Hey Judith!

    I just tried your CSS code, it gets a bit messy, especially on the sections with almost-white and black backgrounds..

    You can view the issue now (right click has been enabled as well).

  •  1,882
    Judith replied
    June 23, 2021 at 3:11pm

    Hi Alberteck,

    It looks ok from my end for white and background:

    7333552990.png
    1245644588.png

    Please let me know what you are getting from your end.

    Thanks.

  •   alberteck replied privately
  •  1,882
    Judith replied
    June 23, 2021 at 4:01pm

    Hi Alberteck,

    Again, try this css:

    @media screen and (max-width: 782px){
    #fp-nav.tooltip_alt {
        box-shadow: none;
    }
}

    Thanks.

  •  23
    alberteck replied
    June 23, 2021 at 4:25pm

    Hi Judith!

    I added the CSS you just sent

    It looks fine on white background now, but the issue on the black background section still persists

  •  1,882
    Judith replied
    June 23, 2021 at 4:50pm

    Hi Alberteck,

    Please try this css:

    #fp-nav:not(.light) ul li a span {
    box-shadow: inset 0 0 0 8px rgb(208 190 190 / 30%);
}

    Thanks.

  •  23
    alberteck replied
    June 23, 2021 at 5:02pm

    Perfect! Thank you so much!

  •  23
    alberteck replied
    July 28, 2021 at 11:52am

    Hey, how can I increase the distance between two dots on mobile, making it easier to touch when using smartphones?

  •  2,967
    Andrew replied
    July 28, 2021 at 12:33pm

    Hi Alberteck,

    Please try this css:

    #fp-nav ul li, .fp-slidesNav ul li {
    padding: 6px 0;
}

    Thanks.

  •  23
    alberteck replied
    July 28, 2021 at 12:53pm

    Thanks!

    For anyone who might need this, to make it only for mobile, use this:

    @media only screen and (max-width: 1000px) {#fp-nav ul li, .fp-slidesNav ul li {padding: 6px 0;}}