Customising Menu

[MikeJohnPage]

Any idea how I can customise the menu bar (e.g., font, location, highlights, etc.)? Do I need to edit the css files in the /inst directory?

Thanks for making this package, it is really appreciated.

[JohnCoene]

You can override the current CSS.

#tocMenu li {
    display:inline-block;
    margin: 10px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 4px;
            border-radius: 4px;
}
#tocMenu li.active{
    background:#666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}
#tocMenu li a{
    text-decoration:none;
    color: #000;
}
#tocMenu li.active a:hover{
    color: #000;
}
#tocMenu li:hover{
    background: rgba(255,255,255, 0.8);
}
#tocMenu li a,
#tocMenu li.active a{
    padding: 9px 18px;
    display:block;
}
#tocMenu li.active a{
    color: #fff;
}
#tocMenu{
  text-align: left;
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin:0;
}
.in{
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
}
.wrapper{
   position: relative;
   width: 100%; /* for IE 6 */
}

In R.

ui <- fullPage(
  tags$head(
    tags$link(href="www/myStyles.css",rel = "stylesheet")
  ),
  menu = c("Full Page" = "link1", "Sections" = "link2"),
  opts = options,
  fullSection(
    center = TRUE,
    menu = "link1",
    tags$h1("fullPage.js meets Shiny")
  ),
  fullSection(
    center = TRUE,
    menu = "link2",
    tags$h1("fullPage.js meets Shiny")
  )
)

[MikeJohnPage]

I thought that might be the solution - thanks for clarifying.

Do you have a place I can give you a one off donation? I am not in a position to become a GitHub sponsor for you at this moment, but would still like to contribute.

[MikeJohnPage]

Just incase this is useful to anybody else, I had to remove www/ from the href file path to get the above code to work. I believe this to be the case because as stated in this guide:

You do not need to add www/ to the file path that you give href. Shiny places the files in your Shiny App’s home directory before sending them to your user’s browser.

[JohnCoene]

Thanks, no need for sponsor, open issues and sharing code is already great. Thanks! :)

On the www folder, it will depend where and how you will deploy the app. Perhaps this works on shinyapps.io otherwise using a subdirectory (often www) with shiny::addResourcePath is necessary :)