Can I get rid of the top bar in Flexdashboards?

Question

I have a flex dashboard and I'd like to get rid of the top bar.

I've tried to do this with CSS by setting the height to 0px, but I've not been successful.

This is my code (it'll be long since it's flex dashboards)

    ---
    title: "Flex"
    author: "I"
    output: 
      flexdashboard::flex_dashboard:
        orientation: rows
    ---
    
    <style>                     
    .navbar {
      background-color:white;
      border-color:white;
    }
    
    .navbar-brand {
      color:white!important;
    }
    
    .navbar-brand {
      color:white!important;
    }
    
    a {
      background-color:white!important;
    }
    
    li {
      background-color:white!important;
    }
    
    body {
      background-color:white;
      border-color:white;
    }
    
    .chart-title {
      background-color:white;
      color:white;
      border-color:white;
    }
    
    #section-chart1 {
      background-color:white;
      border-color:white;
    }
    
    </style>  
    
    ```{r setup, include=FALSE}
    library(ggplot2)
    library(plotly)
    library(plyr)
    library(flexdashboard)
    library(hrbrthemes)
    
    # Make some noisily increasing data
    set.seed(955)
    dat <- data.frame(cond = rep(c("A", "B"), each=10),
                      xvar = 1:20 + rnorm(20,sd=3),
                      yvar = 1:20 + rnorm(20,sd=3))
    
    ```{}

    Page One
    =======================================================================
    
    Row
    -----------------------------------------------------------------------
    
    ### chart1
    
    
    ```{r}
    p <-
      iris %>% 
        ggplot(aes(Sepal.Length, Sepal.Width)) +
                  geom_point(size = 2, color = "purple") +
                  theme_ipsum_rc(grid = "XY") +
                  labs(title = "Sepal Length by sepal width")
    
    ggplotly(p)

You can ignore the {} at the end of the first code block. I added it there so stack overflow would keep the whole thing as a single code block.

I've used the CSS to successfully make it invisible, and now I'd like to get rid of it altogether.

Answer 1

If you set .navbar to display: none the navbar won't be displayed and setting body to padding-top: 0; will help you get rid of the spacing.

.navbar {
  display:none;
}

body {
  padding-top: 0;
}