navbar in R flexdashboard cuts off main content

Question

I'm working on a flexdashboard with lots of pages, and on small screens, the navbar takes up two lines and cuts off the top of the main content.

Here's a sample dashboard with several navbar items:

---
title: "Example long title"
output: 
  flexdashboard::flex_dashboard
---

Home Page {data-icon="fa-home"}
=====================================

Some sample text that will get cut off

Example Page Title 2
=====================================

Example Page Title 3
=====================================

Example Page Title 4
=====================================

Example Page Title 5
=====================================

Example Page Title 6
=====================================

Example Page Title 7
=====================================

After I knit the document, the result looks fine on a large screen:

But when I shrink the window, the navbar turns into two lines and the top of the main content gets cut off:

Is there a way to prevent the top of the main content from getting covered up, without removing items from the navbar?

Thanks

Have you tried using media queries to add more padding on the top of the body at the size where the navbar turns in to two lines? (I'm assuming you are using a fixed position on the navbar?) — Josie, Jun 11 '21 at 18:00
Does this answer your question? [Prevent navigation bar from overlapping content in flexdashboard R](https://stackoverflow.com/questions/42914936/prevent-navigation-bar-from-overlapping-content-in-flexdashboard-r) — mkrasmus, Jun 16 '21 at 05:43

score 2 · Answer 1 · answered Jun 11 '21 at 20:14

You could try turning the flexdashboard navbar into the side bar. With inline CSS code. Using this Stackoverflow question

---
title: "Example long title"
output: 
  flexdashboard::flex_dashboard
---

Home Page {data-icon="fa-home"}
=====================================

Some sample text that will get cut off

Example Page Title 2
=====================================

Example Page Title 3
=====================================

Example Page Title 4
=====================================

Example Page Title 5
=====================================

Example Page Title 6
=====================================

Example Page Title 7
=====================================

<style>
.navbar {
margin: 0;
padding: 0;
height: 100%;
display: block;
position: fixed;
width: 200px; /* Modify the width of the     sidebar */
}
body {
margin-left: 200px; /* Add a left margin to     avoid content overlay */
padding-top:0px
}
</style>

navbar in R flexdashboard cuts off main content

1 Answers1