Add some italic text on the right side of the navbarPage in Rshiny

Question

I am building a Shiny app where I want to add some italic text in the navbarPage at the right side. According to the question: Shiny NavBar add additional info I wrote the following code, but it doesn't work out for me:

This is some demo code I have now:

ui <- fluidPage(
  navbarPage(theme = shinytheme("flatly"), collapsible = TRUE,
             HTML('<a style="text-decoration:none;cursor:default;color:#FFFFFF;" class="active" href="#">Dashboard</a>'), id="nav",
             navbarMenu('Graphs', icon = icon('chart-area'),
                        tabPanel('One country'),
                        tabPanel('Two countries')),
                        tabPanel('Tables'),
             tags$script(HTML("var header = $('.navbar> .container-fluid');
                       header.append('<div style=\"float:right\"><h5>Some very important text</h5></div>');
                       console.log(header)"))
  ))
                        

server <- function(input, output, session) {}
  
shinyApp(ui = ui, server = server)

This results in:

1. the following warning message: Warning message: Navigation containers expect a collection of bslib::nav()/shiny::tabPanel()s and/or bslib::nav_menu()/shiny::navbarMenu()s. Consider using header or footer if you wish to place content above (or below) every panel's contents.
2. not the desired output. Because, the text is not visible, because it has the same colour as the background, the text is under the Dashboard, Graphs en tables text, but I want them to be on the same line. The text is not in italic.

Output now

This is what I want: Desired output

After the answer from lz100 it looks very nice on a big screen, but the text is still under the Dashboard, Graphs en tables text. And when I change the format of the Rshiny dashboard to my very small laptopscreen, the output becomes likes this:

Output after answer from lz100

Answer 1

library(shiny)
library(shinythemes)
ui <- fluidPage(
    navbarPage(theme = shinytheme("flatly"), collapsible = TRUE,
               HTML('<a style="text-decoration:none;cursor:default;color:#FFFFFF;" class="active" href="#">Dashboard</a>'), id="nav",
               navbarMenu('Graphs', icon = icon('chart-area'),
                          tabPanel('One country',
                               tags$script(HTML(
                               "
                               var header = $('.navbar> .container-fluid');
                               header.append('<div id=\"my-title\">Some very important text</div>');
                               ")),
                               tags$style(HTML(
                                   '
                                   .navbar-collapse.collapse {display: inline-block !important;}
                                   #my-title {
                                       float:right; 
                                       display: flex; 
                                       color: white;
                                       align-items: flex-end; 
                                       justify-content: flex-end; 
                                       height: 60px; 
                                       font-style: italic;
                                   }
                                   '
                               ))
                          ),
                          tabPanel('Two countries')),
               tabPanel('Tables')
    )
)


server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)

1. The reason you have warnings is because you put tags$script under navbarPage. Not a big deal to me, but I relocate your script inside the first tabPanel, warnings are gone.
2. Some CSS and JS added to create your desired output

Search/Read here if you don't know how these CSS work: https://www.w3schools.com/css/default.asp