Text is not displayed in shiny dashboard header after combining with library bs4Dash

Question

Im trying to include some text inside shiny dashboard header. While this works when I combine it with library bs4Dash the text is not displayed any more.

library(shiny)
library(shinydashboard)
library(bs4Dash)
ui <- dashboardPage(
  dashboardHeader(
    title = "demo"
  ), 
  dashboardSidebar(), 
  dashboardBody(
    tags$head(tags$style(HTML(
      '.myClass { 
        font-size: 20px;
        line-height: 50px;
        text-align: left;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 0 15px;
        overflow: hidden;
        color: black;
      }
    '))),
    tags$script(HTML('
      $(document).ready(function() {
        $("header").find("nav").append(\'<span class="myClass"> Text Here </span>\');
      })
     '))
  )
) 
server <- function(input, output) { } 
shinyApp(ui, server)

Answer 1

TL;DR Different DOM structure for both scenarios

The reason is that the dashboardHeader has different tags structure when you are using only shinydashboard and when you add additional bs4Dash. Be careful with it as it can exposed a lot of different problems like dropdownMenu inside dashboardHeader can look very bad for such packages combo.

First case:

library(shiny)
library(shinydashboard)
# jquery
# $("header").find("nav").append(\'<span class="myClass"> Text Here </span>\');

Second case, I do not feel this selector is elegant. The best will be to have custom tags$div(id = "xyz") and inject text to it, but this is not so obvious when using dashboards. Sum up it works.

library(shiny)
library(shinydashboard)
library(bs4Dash)
# jquery
# $("body > div.wrapper > nav > ul:nth-child(1)").append(\'<span class="myClass"> Text Here </span>\');