Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 13, 2022 at 11:19 am #1364877
    fkm

    Hi Enfold team,

    I´m using the timeline and I already made some coszumizations via quick CSS.
    Unfortunately, I can’t manage to customize the navigation of the timeline (even I found some CSS codes for it that unfortunatelly didin´t work in my case).
    So please help and please see screenshots.

    Thank you very much for your reply in advance.

    Best regards,
    fkm

    September 13, 2022 at 2:36 pm #1364909
    Yigit

    Hey fkm!

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
#top .avia-timeline-container.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top .avia-timeline-container.av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
  color: black;
  opacity: 1;
}
.next-slide {
  right: 20px !important;
}
.av-timeline-nav {
  padding-top: 0px;
}
.av-timeline-nav a::before {
  background: transparent;
}

    Best regards,
    Yigit

    September 13, 2022 at 3:52 pm #1364924
    fkm

    Hey Yigit,

    thank you very much for your reply and the CSS Codes – I was able to make the most adjustments with it. Great.

    Is there a way to position the navigation arrows (next, previous, both) for each situation at the very right edge?
    Please see screenshots.

    Thanks a lot in advance.

    Best regards,
    fkm

    September 13, 2022 at 4:16 pm #1364927
    Yigit

    Hey,

    You are welcome! :)

    Please add following code to Quick CSS as well

    
.prev-slide {
  left: 0;
}

    Regards,
    Yigit

    September 16, 2022 at 10:09 am #1365223
    fkm

    Hey Yigit,

    thank you very much for your quick reply.

    The code doesn´t seem to work on my end.
    But that’s okay because somehow I like the (animated) navigation as it is now and I’ll keep it that way.
    Thanks anyways.

    Soemthing else:
    I was able to change the position of the navigation as desired using the following code you gave me:

    .av-timeline-nav {
    padding-top: 7px;
    }

    However, this did not work for the mobile view.
    So I tried this one:

    @media only screen and (max-width: 767px) {
    .av-timeline-nav {
    padding-top: 7px;
    }}

    Unfortunaltelly nothing happened.
    So please let me know how to get this done.
    Please see screenshot.

    Thanks a lot in advance.

    Best regards,
    fkm

    September 17, 2022 at 8:13 pm #1365355
    Mike

    Hi,
    Thanks for your screenshot, for mobile please try this css:

    @media only screen and (max-width: 767px) {
.av-no-preview #main .av-timeline-nav {
    padding-top: 0;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 19, 2022 at 11:43 am #1365511
    fkm

    Hi Mike,

    thank you very much for your quick reply and the css.

    In the meantime I realized that the css codes for the navigation (prev, next) not only affected the timeline element, but all the easy sliders on my website.
    Now that I´m using the page id for the css/timeline everything suddenly works as it should.
    So this topic can be closed as successfully completed.

    Thanks a lot.

    Best regards,
    fkm

    September 19, 2022 at 12:06 pm #1365521
    Ismael

    Hi,

    Great! Glad to know that this has been sorted out. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Timeline (milestones) navigation’ is closed to new replies.