adding custom CSS to navbarPage, creates ghost tab

[Andrew Caines]

Hello,

I'd like to customise the CSS for my Shiny App, as described in this article.

My example app is the 'navbar example' from the Shiny Gallery [with the exception of `h6("about.md")` in the 'About' tabPanel rather than calling a markdown file `includeMarkdown("about.md")`]

So if I add CSS to the header with tags -- taking the example from the article:

  tags$head(
    tags$style(HTML("
      @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
      
      h1 {
        font-family: 'Lobster', cursive;
        font-weight: 500;
        line-height: 1.1;
        color: #48ca3b;
      }

    "))
  ),

-- the result is that 'h1' elements do indeed change per the css, but now the navbar has an empty tab that should not be there, appearing before the first specified tab (here, 'Plot'). See html here extracted from source:

<li class="active">

    <a href="#tab-6475-1" data-toggle="tab"></a>

</li>

<li>

    <a href="#tab-6475-2" data-toggle="tab">Plot</a>

</li>

Does anyone know why this happens / how to prevent it?

many thanks, Andrew

[bsit...@ksvc.com]

I am having the same problem.

If you take out the "Navbar!" the ghost tab goes away, but so does the title.  There is a tags$title() but I can't seem to get it to work quite right.

But I believe there's an anwer, however I do think this is a glitch.

[bsit...@ksvc.com]

So I think the fix is to use the navbarPage(..., header = , ...) parameter.  

Just put "header =" in front of your tags$head(...) code and it should work.

There may be more elegant ways of declaring the header but I think this way works, it did for me anyway.

On Monday, September 22, 2014 at 2:57:22 PM UTC-4, Andrew Caines wrote:

[Dean Attali]

I opened a github issue https://github.com/rstudio/shiny/issues/827

I also have a temporary fix that works well for me (I didn't want to include a header in every tab, I really wanted to have a title instead).

The first line in the server tells the first tab to be selected, and I'm adding a CSS that makes the ghost tab not appear. WATCH OUT because if you use this hack and the problem is fixed in a later shiny version, you will have to remember to remove the css hack, or else your first real tab will not appear.

runApp(list(
  ui = navbarPage(
    "Title",
    id = "page-nav",
    tags$head(tags$style(HTML(
      "#page-nav > li:first-child { display: none; }"
    ))),
    tabPanel(title = "First", "hello"),
    tabPanel(title = "Second", "world")
  ),
  server = function(input, output, session) {
    updateTabsetPanel(session, "page-nav", "First")
  }
))

[Dean Attali]

If anybody finds this thread: Joe Cheng pointed out that navbarPage does not have to be the top-most tag, and so we can use a simple workaround to to fix this

runApp(list(
  ui = tagList(
    tags$head(tags$style(HTML("body{ background: red; }"))),
    navbarPage(
      "Title",
      tabPanel(title = "First"),
      tabPanel(title = "Second")

    )
  ),
  server = function(input, output, session) {}

))

[Sollano Rabelo Braga]

This saved me! Thanks @Dean Attali!