Shiny navbarpage draws over elements from below - r

Question

This is the problem I am trying to solve. My navbarpage overlaps other elements from below. Is there any way to put the navbarpage in the background? Or perhaps make the daterange input show it's calendar below its input box?
The documentation mentions using fixed-top or fixed-bottom for the posotion argument will cause the navbar to overlay your body content, unless you add padding.
Adding padding does not solve the problem though.
Here is a reproducible example -
ui <- fluidPage(
fluidRow(class = 'headerrow', column(width = 12, style = "font-size: 30pt; line-height: 8vh; text-align:left; color:#FFFFFF; width = 100", tags$strong('Test')), tags$head(tags$style('.headerrow{height:8vh; background-color:#267dff}'))),
navbarPage(
'Navbar',
tabPanel(
'Menu1',
sidebarPanel(
selectInput('drink', 'Choose your poison', choices = c('Bloody Mary', 'Sex on the beach'), selected = 'Bloody Mary'),
dateRangeInput('period', 'Date range', start = '2016-05-01', end = '2017-04-01',
min = '2013-07-01', max = '2017-06-01', startview = 'year', format = 'mm/yyyy'),
width = 2
),
mainPanel(width = 10)
),
tabPanel('Menu2'),
tabPanel('Menu3'),
tabPanel('Menu4')
)
)
server <- function(input, output){
}
shinyApp(ui, server)
Thank you so much!

Answer 1

Try adding z-index to the div: tags$style(HTML(".datepicker {z-index:99999 !important;}"))
library(shiny)
ui <- fluidPage(
fluidRow(class = 'headerrow', column(width = 12, style = "font-size: 30pt; line-height: 8vh; text-align:left; color:#FFFFFF; width = 100", tags$strong('Test')), tags$head(tags$style('.headerrow{height:8vh; background-color:#267dff}'))),
navbarPage(
'Navbar',
tabPanel(
'Menu1',
tags$style(HTML(".datepicker {z-index:99999 !important;}")),
sidebarPanel(
selectInput('drink', 'Choose your poison', choices = c('Bloody Mary', 'Sex on the beach'), selected = 'Bloody Mary'),
dateRangeInput('period', 'Date range', start = '2016-05-01', end = '2017-04-01',
min = '2013-07-01', max = '2017-06-01', startview = 'year', format = 'mm/yyyy'),
width = 2
),
mainPanel(width = 10)
),
tabPanel('Menu2'),
tabPanel('Menu3'),
tabPanel('Menu4')
)
)
server <- function(input, output){}
shinyApp(ui, server)