Mobile Navigation Looks Good, Desktop Does Not

  • Resolved jvmedia

    (@jvmedia)


    4 years, 2 months ago

    Hi there,

    We seem to be having an issue with the navigation. We have a lot of slides (over 40). If you view the link with the slideshow on mobile size screen, the navigation works properly. On desktop, however, it does not – the arrows are missing and the navigation is putting all dots on a specific size line. How can we ensure the navigation looks and works the same on all devices.

    Also, if you look at the navigation on mobile size screen, you will see the circles around the arrows are a light gray, so are the dates that are not selected and the outline on the unselected navigation. When you mouse over the unselected navigation circles, they turn blue inside. We would like to change all of these styles to match our site. Can you let us know what the CSS styles are for those items?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Ketan Patel

    (@patelketan)

    Hello,

    Thanks for reaching here.

    Please try the “slidestoshow” parameter in your shortcode.
    Ex:- [th-slider slidestoshow=”3″]

    Please go to your Admin Panel->Appearance->Customize->Additional CSS.
    Please add CSS in the “Additional CSS” section.

    .wpostahs-slider-design-2 .wpostahs-slider-nav .slick-current .wpostahs-main-title button{ border-color: #220d06; background: #220d06; }
.wpostahs-slider-design-2 .wpostahs-slider-nav .wpostahs-slider-nav-title:hover .wpostahs-main-title button { background: #f4ebd6 !important; border-color: #220d06 !important; }

    Let me know if you have any query.

    Thanks,

    Thread Starter jvmedia

    (@jvmedia)

    Thank you. We already had the slidestoshow parameter in the shortcode. This was actually the full code we had:

    [th-slider design=”design-2″ slidestoshow=”44″ autoplay=”false” limit=”-1″ dots=”false” arrows=”true”]

    Unfortunately the display is still weird on desktop size.

    We also added the css and that worked for the styling bits though.

    Plugin Support Riddhi Shukla

    (@ridhimashukla)

    Hello,

    Thank you for reaching us…

    If you want to set the same design as the mobile screen then you have to manage slidetoshow values 3 or 1. You have set slidetoshow=”44″, which is breaking our design template.

    In the mobile screen, the slider will automatically display one slide dot with an arrow as per screen size.

    Can I know the total post in the slider?

    Do you want to hide the dots which is actually the title after the slide dots then apply below CSS code,

    .wpostahs-slider-design-2 .wpostahs-slider-nav-title .wpostahs-title{ display:none; }

    Please check and let me know if anything.

    • This reply was modified 4 years, 2 months ago by Riddhi Shukla.
    Thread Starter jvmedia

    (@jvmedia)

    Hi there,

    Ah, understood. We misinterpreted that and thought we were to put the full number of slides there.

    Thanks for the assistance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile Navigation Looks Good, Desktop Does Not’ is closed to new replies.