Place image and text as title in shinydashboard

Question

I have the shinydashboard below in which I have hidden the title in order to place image and besides image text as title. But the image is not moving to the left in order not have empty space to its left and the text seems to be hidden.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
mytitle <- paste0("Global Analytics COE: Resource Allocation and Revenue Risk")

shinyApp(
  ui = dashboardPage(
    
    header = dashboardHeader(
      titleWidth = "0px",
      tags$li(a(
        div(style = "margin-left:-15px;margin-bottom:-78px;margin-top:-15px;padding: 0px 1810px 0px 0px ; width: 290px;",
            img(src='logoSanofi.jpg',height = "50px",width="230px")),
        div(style="display: inline;margin-top:-35px; padding: 0px 50px 0px 70px ;font-size: 14px ;color:#001641;font-family:Chronicle Display Light; width: 50px;",HTML(mytitle))
        
      ),
      class = "dropdown")
    ),
    sidebar = dashboardSidebar(minified = TRUE, collapsed = F),
    body = dashboardBody(
      useShinyjs(),#tags$head(tags$script(src="format_number.js")),
      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
      # Note: 'sidebar-toggle' is a class name (i.e. HTML class attribute) of Shiny icon 
      tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"),
      #includeCSS("www/style.css")
    )
    
  ),
  server = function(input, output) { }
)

Answer 1

I was able to solve this problem by adding a class tag to image and adding margin left attribute to class in tags head style. Below is the updated code.

library(shiny)
library(shinyjs)
library(shinydashboard)
library(shinydashboardPlus)
mytitle <- paste0("Global Analytics COE: Resource Allocation and Revenue Risk")

shinyApp(
  ui = dashboardPage(
    
    header = dashboardHeader(
      titleWidth = "0px",
      tags$li(a(
        div(style = "margin-left:-15px;margin-bottom:-78px;margin-top:-15px;padding: 0px 1810px 0px 0px ; width: 290px;",
            img(src='logoSanofi.jpg',height = "50px",width="230px",class = 'header_img')),
        div(style="display: inline;margin-top:-35px; padding: 0px 50px 0px 70px ;font-size: 14px ;color:#001641;font-family:Chronicle Display Light; width: 50px;",HTML(mytitle))
        
      ),
      class = "dropdown")
    ),
    sidebar = dashboardSidebar(minified = TRUE, collapsed = F),
    body = dashboardBody(
      useShinyjs(),#tags$head(tags$script(src="format_number.js")),
      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;} .header_img {margin-left: -90px;}")),
      # Note: 'sidebar-toggle' is a class name (i.e. HTML class attribute) of Shiny icon 
      tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"),
      #includeCSS("www/style.css")
    )
    
  ),
  server = function(input, output) { }
)

Answer 2

I have written custom shiny script which will fix your both problems:

server.R

library(shiny)

## build server.R
server <- 
    function(input, output, session) {}

ui.R

####
library(shinydashboard)
library(shiny)
library(shinyBS)
library(shinyjs)

## load functions
source('helper_functions.R')


## build ui.R -----------------------------------
## 1. header -------------------------------
header <-
  dashboardHeader(
    title = HTML("Intelligence Dashboard"),
    disable = FALSE,
    titleWidth  = 550
    
  )

header$children[[2]]$children[[2]] <-
  header$children[[2]]$children[[1]]
header$children[[2]]$children[[1]] <-
  tags$a(
    href = 'http://https://github.com/PawanRamaMali',
    tags$img(
      src = 'www/artificial-intelligence-logo.png',
      height = '67',
      width = '228.6',
      align = 'left'
    ),
    target = '_blank'
  )



## 2. siderbar ------------------------------
siderbar <-
  dashboardSidebar(
    width = 200,
    sidebarMenu(
      id = 'sidebar',
      style = "position: relative; overflow: visible;",
      
      ## 1st tab show the Main dashboard -----------
      menuItem(
        "Main Dashboard",
        tabName = 'dashboard',
        icon = icon('dashboard')
      )
      
    )
  )

## 3. body --------------------------------
body <- dashboardBody(
  ## 3.0. CSS styles in header ----------------------------
  tags$head(
    ## modify the dashboard's skin color
    tags$style(
      HTML(
        '
                       /* logo */
                       .skin-blue .main-header .logo {
                       background-color: #00b2e3;
                       }

                       /* logo when hovered */
                       .skin-blue .main-header .logo:hover {
                       background-color: #00b2e3;
                       }

                       /* navbar (rest of the header) */
                       .skin-blue .main-header .navbar {
                       background-color: #00b2e3;
                       }

                       /* active selected tab in the sidebarmenu */
                       .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                       background-color: #00b2e3;
                                 }
                       '
      )
    ),
    
    ## modify icon size in the sub side bar menu
    tags$style(
      HTML(
        '
                       /* change size of icons in sub-menu items */
                      .sidebar .sidebar-menu .treeview-menu>li>a>.fa {
                      font-size: 15px;
                      }

                      .sidebar .sidebar-menu .treeview-menu>li>a>.glyphicon {
                      font-size: 13px;
                      }

                      /* Hide icons in sub-menu items */
                      .sidebar .sidebar-menu .treeview>a>.fa-angle-left {
                      display: none;
                      }
                      '
      )
    ) ,
    
    tags$style(HTML("hr {border-top: 1px solid #000000;}")),
    
    ## to not show error message in shiny
    tags$style(HTML(
      ".shiny-output-error { visibility: hidden; }"
    )),
    tags$style(HTML(
      ".shiny-output-error:before { visibility: hidden; }"
    )),
    
    ## head dropdown menu size
    
    tags$style(
      HTML(
        '.navbar-custom-menu>.navbar-nav>li:last-child>.dropdown-menu { width:10px; font-size:10px; padding:1px; margin:1px;}'
      )
    ),
    tags$style(
      HTML(
        '.navbar-custom-menu> .navbar-nav> li:last-child > .dropdown-menu > h4 {width:0px; font-size:0px; padding:0px; margin:0px;}'
      )
    ),
    tags$style(
      HTML(
        '.navbar-custom-menu> .navbar-nav> li:last-child > .dropdown-menu > p {width:0px; font-size:0px; padding:0px; margin:0px;}'
      )
    )
  ),
  
  ## 3.1 Dashboard body --------
  tabItems(## 3.1 Main dashboard --------------
           tabItem(
             tabName = 'dashboard',
             ## contents for the dashboard tab
             div(id = 'main_wait_message',
                 h1() ,
                 tags$hr()),
             
             fluidRow(),
             
             h2(paste0("Dashboard Content")),
             fluidRow(),
             
           ))
)



## put UI together ----------
ui <-
  dashboardPage(header, siderbar, body)

helper_functions.R

#### vb style -----------------
VB_style <- function(msg = 'Hello', style = "font-size: 100%;") {
  tags$p(msg , style = style)
}

## rgb to hex function---------------
GetColorHexAndDecimal <- function(color)
{
  c <- col2rgb(color)
  sprintf("#%02X%02X%02X %3d %3d %3d", c[1], c[2], c[3], c[1], c[2], c[3])
}


# Function to call in place of dropdownMenu --------------
customSentence <- function(numItems, type) {
  paste("Feedback & suggestions")
}

customSentence_share <- function(numItems, type) {
  paste("Love it? Share it!")
}

##
dropdownMenuCustom <-
  function (...,
            type = c("messages", "notifications", "tasks"),
            badgeStatus = "primary",
            icon = NULL,
            .list = NULL,
            customSentence = customSentence)
  {
    type <- match.arg(type)
    if (!is.null(badgeStatus))
      shinydashboard:::validateStatus(badgeStatus)
    items <- c(list(...), .list)
    lapply(items, shinydashboard:::tagAssert, type = "li")
    dropdownClass <- paste0("dropdown ", type, "-menu")
    if (is.null(icon)) {
      icon <- switch(
        type,
        messages = shiny::icon("envelope"),
        notifications = shiny::icon("warning"),
        tasks = shiny::icon("tasks")
      )
    }
    numItems <- length(items)
    if (is.null(badgeStatus)) {
      badge <- NULL
    }
    else {
      badge <- tags$span(class = paste0("label label-", badgeStatus),
                         numItems)
    }
    tags$li(
      class = dropdownClass,
      a(
        href = "#",
        class = "dropdown-toggle",
        `data-toggle` = "dropdown",
        icon,
        badge
      ),
      tags$ul(
        class = "dropdown-menu",
        tags$li(class = "header",
                customSentence(numItems, type)),
        tags$li(tags$ul(class = "menu", items))
      )
    )
  }

Shiny App Folder Structure

|
+-- ui.R
+-- server.R
+-- helper_functions.R
+-- www/logo.png