How to make navigation arrow more conspicuous when using Quarto to make revealjs slides

Question

How do I adjust the navigation arrows in revealjs when using Quarto in vertical navigation. The down arrow can be easily hidden by slide content. I would like to increase the size, change the color or animate the navigation arrow.

My sample code is below any help is appreciated.

---
format:
  revealjs:
    controls: true
    navigation-mode: vertical
    self-contained: true
---


#  Adjust Navigation Arrows

##  

-   How do I format the down arrow to navigate to this slide so it is more noticeable such as increasing size, changing color or animating it?

Answer 1

You just need to set css rules for .navigate-up and .navigate-down classes.

---
format:
  revealjs:
    controls: true
    navigation-mode: vertical
    self-contained: true
    css: styles.css
---

#  Adjust Navigation Arrows

##  

-   How do I format the down arrow to navigate to this slide so it is more noticeable such as increasing size, changing color or animating it?

styles.css

.navigate-up .controls-arrow,
.navigate-down .controls-arrow {
  font-size: 20px;
  color: red;
}

This will style both the up and down navigation buttons.

---

---

If you only want to style the down arrow button, just remove the .navigate-down .controls-arrow css selector.

.navigate-down .controls-arrow {
  font-size: 20px;
  color: red;
}