Html Question posted in
Some basic documentation can be found here.

Html – How can I align a logo in the navbar header of an R shiny app created using bslib?

I am trying to add my company’s logo to an R shiny app, made using {bslib}. I tried different ways of adding this image to the ‘title’ argument of ‘page_navbar’. While the image gets added, it looks wonky and changes the position of the other items in the header ribbon. An example image and the logo attached.

Here is a demo code that illustrates the problem:

library(shiny)
library(bslib)
ui <- page_navbar(
  title = div("My app",
              img(src = "WCTMainLogoWhite_edited.png", height = "57.5px", width = "auto", 
                  style = "position: absolute;
                           top: 1px;
                           right: 2%;")),
  theme = bs_theme(version = 5, bootswatch = "zephyr")|> ##setting the primary color of "zephyr" bootswatch theme manually
    bslib::bs_add_rules(
      rules = "
                    .navbar.navbar-default {
                        background-color: $primary !important;
                    }
                    "
    ),
  nav_panel(title = "Trends",
            layout_columns(
              card(
                full_screen = TRUE,
                card_header(
                  "Card 1")
                )),
              layout_columns(
                card(
                  full_screen = TRUE,
                  card_header("Card 2")),
                card(
                  full_screen = TRUE,
                  card_header("Card 3")),
                col_widths = c(12, 12) 
              )
            ),
  nav_panel(title = "Instructions on use", p("Content to be added"))
)

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

shinyApp(ui, server)

Is there a better way to add the image, that will align with the other items in the header?

enter image description hereenter image description here

Tags:

2

Answers


  1. 0

    The best way to align items to center is by using flex.
    Add display: flex & align-items: center to parent div. That’s it

    If you wish to fix your existing code, then add this properties to your logo.

    1. position: absolute;.
    2. top: 0 & bottom: 0;.
    3. margin: auto 0;.

    My personal favorite is using flex, ask further for any doubts. Cheers.

    Login or Signup to reply.
  2. 0

    I would use an approach which is described in this answer, the image is just appended to the navbar. This looks like this and is implemented below.

    Navbar view

    However, if one is below the lg breakpoint this does not lead to a satisfactory result because then the navbar gets collapsed and the image position changes. Therefore I implemented css @media (max-width:992px) below which sets the image position to fixed and also sets right: 10% such that one still has access to the navbar-toggle button.

    Navbar view collapsed 1

    You could also do this the other way around and switch the position of the image and the toggle button if you want to have the image on the right-hand side.

    Navbar view collapsed 2

    library(shiny)
library(bslib)

ui <- page_navbar(
  title = "My app",
  theme = bs_theme(version = 5, bootswatch = "zephyr")|> ##setting the primary color of "zephyr" bootswatch theme manually
    bslib::bs_add_rules(
      rules = "
                    .navbar.navbar-default {
                        background-color: $primary !important;
                    }
                    "
    ),
  nav_panel(title = "Trends",
            tags$head(
              tags$script(
                HTML('$(document).ready(function() {
                       $(".navbar .container-fluid")
                         .append("<img id = 'myImage' src='WCTMainLogoWhite_edited.png' align='right' height = '57.5px'>"  );
                      });')),
              tags$style(
                HTML('@media (max-width:992px) { #myImage { position: fixed; right: 10%; top: 0.5%; }}')
                # or: 
                # HTML('@media (max-width:992px) { #myImage { position: fixed; right: 1%; top: 0.5%; }
                #                                 div.navbar-header > button {margin-right: 175px}}')
              )),
            layout_columns(
              card(
                full_screen = TRUE,
                card_header(
                  "Card 1")
              )),
            layout_columns(
              card(
                full_screen = TRUE,
                card_header("Card 2")),
              card(
                full_screen = TRUE,
                card_header("Card 3")),
              col_widths = c(12, 12) 
            )
  ),
  nav_panel(title = "Instructions on use", p("Content to be added"))
)

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

shinyApp(ui, server)

    Unrelated here, but concerning the setting the primary color of "zephyr" bootswatch theme manually please note that I recently updated my answer here and provided an in my opinion better solution than the old one. I did not implement here in order to stay close to your provided code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search