I am trying to format the navbar of my shiny app where the height of the tab titles is the same as the four logos to the right and the image to the left. Ideally, the image to the left would be higher or the same height as the four tabs. Attached is a picture of how the navbar currently looks. The link to the app is also copied here: https://marzanoresearch.shinyapps.io/dashboard_version3/?_ga=2.91842330.1263681469.1654457055-750961707.1634592294

Here is my code chunk for the top part of my ui where I set up the navbar:

ui <- tagList(
  includeCSS("www/styles.css"),
  tags$head(tags$script(type="text/javascript", src = "code_2.js")),
  navbarPage(
    selected = shiny::HTML("<span style = 'color: #a1a75f'>Introduction</span></p>"),
    title = div(
        img(src='imi-pono-title-graphic_blank_no_year.png',
                    style="margin-top:10px; padding-right:10px;padding-bottom:25px",
                    height = 80)),
            windowTitle = "‘Imi Pono Hawaiʻi Wellbeing Survey",
                 # setBackgroundColor(
                 #   color = c("#F7FBFF", "#2171B5"),
                 #   gradient = "linear",
                 #   direction = "bottom"
                 # ),
    tabPanel(shiny::HTML("<span style = 'color: #a1a75f'>Introduction</span></p>"),
             includeHTML("About.html")
    ),

The four logos to the right are rendering in one image through a javascript file in my www folder. My CSS file has the following code:

.container-fluid {

padding-bottom: 25px;

padding-top: 25px;

}


img {

margin-top: 10px !important;

}

What would be the best way to lower the height of the tab titles to be equal with the images on both sides?

Thank you.