use_banner conflict with css border-top

[jorgesinval]

The function use_banner does not place the top (right or left info) on the "true" top of the slide when using a custom css with the following code (i.e., border-top....):

.remark-slide-content {
  background-color: #FAFAFA;
  border-top: 80px solid #c70831;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  padding: 1em 2em 1em 2em
}

xaringanExtra::use_banner(top_right = '<img src="https://pngimage.net/wp-content/uploads/2018/05/example-logo-png-1.png"  width="153"  alt="example">',
                          exclude = "title-slide")

[gadenbuie]

The problem is that the large top border effectively means that the top of the slide content area is where the white and red meet. You can use negative margins on the top banner to move it back into place. Here's something that would work in your custom CSS:

.xe-banner.top {
  margin-top: -60px;
}

[gadenbuie]

Also here's a complete minimal reprex for testing (you gave me everything I needed, but this wraps it up in one tiny xaringan document).

---
title: Issue 168
output:
  xaringan::moon_reader:
    seal: false
---

# Introduction

Text

```{r xaringanExtra-banner, echo = FALSE}
xaringanExtra::use_banner(
  top_right = '<img src="https://pngimage.net/wp-content/uploads/2018/05/example-logo-png-1.png"  width="153"  alt="example">',
  exclude = "title-slide"
)

.remark-slide-content {
  background-color: #FAFAFA;
  border-top: 80px solid #c70831;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  padding: 1em 2em 1em 2em
}
.xe-banner.top {
  margin-top: -60px;
}

[jorgesinval]

Confirmed, working. Thank you!

[jorgesinval]

By the way, a small comment for those whiling to use the progress bar together with the banner. Use the use_progress_bar function instead of the "remarkish" solution (here). The latter will create an unstable behavior in the progress bar when the function use_banner is added to the slides.