Adding am image in shinydashboard header hides the toggle button

Im trying to add a logo next to the toggle button of shinydashboard header but then the toggle button is not displayed at all. The result should be like

## app.R ##
library(shiny)
library(shinydashboard)

library(shinydashboardPlus)



ui <- dashboardPage(
  dashboardHeader(
    title = div("", id = "home_logo", a(href = "#Home",
                                        (img(src = "namuda_icon.PNG", height = "25px", 
                                             style = "position: relative; top:-5px; left: -5rem;")) )),
    controlbarIcon = shiny::icon("filter")
    
  ),
  dashboardSidebar(
    collapsed = TRUE
    
      
    ),
  dashboardBody(

    tags$head(tags$style(HTML('
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: white;
                              }

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

        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: white;
        }  
                               
        /* body */
        .content-wrapper, .right-side {
                              background-color: white;
                                 }

        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: snow;
        }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle{
                              background-color: black;
         }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: black;
                              }
                              
       

        
       
                              '))),
    tags$style(type="text/css",".sidebar-toggle{ position: absolute;
    left: -23rem;
}
.skin-white .main-header .logo, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover{
    background-color: white;}"),
    
    
    
    
  ),
  
  controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "black",icon = icon("filter"))

                                   
                                  
  
  
)

server <- function(input, output) {}
  
  
shinyApp(ui, server)

Solution

To add a logo next to the toggle button we have to do it this way:

# app.R ##
library(shiny)
library(shinydashboard)

library(shinydashboardPlus)



ui <- dashboardPage(
  dashboardHeader(# removed some lines
    title = div("", id = "home_logo", a(href = "#Home",
                                         )),
    controlbarIcon = shiny::icon("filter")
    
  ),
  dashboardSidebar(
    collapsed = TRUE
    
    
  ),
  dashboardBody(
    # new code  9 lines
    tags$head(tags$style(HTML('
        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                                background-image:url("https://www.r-project.org/logo/Rlogo.png");
                                background-position-x: 2%;
                                background-size: 70px 40px;
                                background-repeat: no-repeat;
                                background-color:#000;
                              }
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: white;
                              }

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

        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: white;
        }  
                               
        /* body */
        .content-wrapper, .right-side {
                              background-color: white;
                                 }

        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: snow;
        }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle{
                              background-color: black;
         }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: black;
                              }
                              
       
       
                              '))),
    
    tags$style(type="text/css",".sidebar-toggle{ position: absolute;
}
.skin-white .main-header .logo, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover{
    background-color: white;}"),
    
    
    
    
  ),
  
  controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "black",icon = icon("filter"))
  
  
  
  
  
)

server <- function(input, output) {}


shinyApp(ui, server)