Customise title bar in shiny

Question

I am trying to customise a shiny page.

My question: how to change the colours across the full title bar and tabs please.

Below describes what I am trying to get and the things I have tried (I have added a few different things in the example below that I have used in case any of these adversely affect an approach to customise).

• an image (reasonably sized) on the left: using How can I insert an image into the navbar on a shiny navbarPage() worked but do not know how to resize
• the title after the image: (left align the title using below worked)
• right align several page tabs: Using R shiny navbarPage right aligned tabs I was able to right align the tabs
• change the colours of the text and background: still outstanding using Background color of tabs in shiny tabPanel

So really the main outstanding issues are the colour customisation - please see image below. The title text and background colours have been changed except the change in colour does not extend across the full title bar (its still grey in the middle). I have been unable to change the tab text colour or background colour when it is not selected. For that I tried adding code below, as well as changing the colour in .navbar .navbar-nav.

.tabbable > .nav > li > a                    {background-color: aqua;  color:black}
.tabbable > .nav > li > a[data-value='One'] {background-color: red;   color:white}

This is the current output of the code below.

(As you can see from the code I am creating Frankenstein's monster by grabbing various parts of Q&A's from SO, so if there is a better approach I would greatly appreciate it.)

mwe

library(shiny)    

 ui <- fluidPage(

  list(
  tags$head(HTML('<link rel="icon", href="Rplot.png", type="image/png" />')),

  tags$style(HTML("
      .navbar .navbar-nav {float: right; 
                           color: #ff3368; 
                           font-size: 38px; 
                           background-color: #FFFF00 ; } 
      .navbar .navbar-header {float: left; } 
      .navbar-default .navbar-brand { color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;} 

  "))),

   navbarPage(
              title=div(img(src="Rplot.png"), "My Title in the Navbar"),
              tabPanel("One"),
              tabPanel("Two")
                    ))


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

shinyApp(ui, server)

Answer 1

You seem to succesfully colorize parts, but not the whole row. Therefore, you should inspect the element (right-click - inspect element) and look for the parent elements.

There you can see:

<nav class="navbar navbar-default navbar-static-top" role="navigation">

That you can address with css via: .navbar.navbar-default.navbar-static-top and then set the color.

Code should be added to: tags$style(HTML("...")), e.g:

.navbar.navbar-default.navbar-static-top{background-color: #FFFF00 ;}

A working example below:

library(shiny)    

ui <- fluidPage(

  list(tags$head(HTML('<link rel="icon", href="Rplot.png", 
                       type="image/png" />'),

                 tags$style(HTML("
      .navbar .navbar-nav {float: right; 
                           color: #ff3368; 
                           font-size: 38px; 
                           background-color: #FFFF00 ; } 
      .navbar.navbar-default.navbar-static-top{ color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;}
      .navbar .navbar-header {float: left; } 
      .navbar-default .navbar-brand { color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;} 

  ")))),

  navbarPage(
    title=div(img(src="Rplot.png"), "My Title in the Navbar"),
    tabPanel("One"),
    tabPanel("Two")
  ))


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

shinyApp(ui, server)