How to add images to the edges and a title to the center of a page_navbar?

I have a Shiny app that has a navigation bar on top. I would like to add two different logos, one to the left and the other to the right of that navbar, and add a title in the middle after all nav panels.

This is where I'm at:

This is where I want to be

This is my current code

ui <- page_navbar(
  
  title = span("MY TITLE"),
  
  tags$head(
    tags$script(
      HTML("$(document).ready(function() {
              $('.navbar .container-fluid')
                .append('<img id = \"logo_1\" src=\"logo_1.png\" align=\"left\" height = \"57.5px\">');
            });")),
    tags$style(
      HTML("@media (max-width:992px) { #logo_1 { position: fixed; left: 10%; top: 0.5%; }}")
    )
  ),
  
  bg = "#4F2170",
  
  nav_panel(
    
    title = "Intro",
    
    page_fillable(
      
      
      
    )
  ),
  
  nav_panel(
    
    title = "Data"
    
    
  ),
  
  nav_menu(
    
    title = "Summary",
    
    nav_panel(
      
      title = "Item 1",
      
    ),
    
    nav_panel(
      
      title = "Item 2",
      
    ),
    
    nav_panel(
      
      title = "Item 3",
      
    )
    
    
    ),
  
  tags$head(
    tags$script(
      HTML("$(document).ready(function() {
              $('.navbar .container-fluid')
                .append('<img id = \"logo_2\" src=\"logo_2.png\" align=\"right\" height = \"57.5px\">');
            });")),
    tags$style(
      HTML("@media (max-width:992px) { #logo_2 { position: fixed; right: 10%; top: 0.5%; }}")
    )
  )
  
  
)

I have all the images in the www folder, but I am having a hard time placing all of the elements in the places that I want to have them.

For this I would suggest not using the title argument and instead use a nav_item() to act like the title. I checked the HTML for the normal title and basically copied it. For the images, the location depends on the order inside page_navbar(), going left to right. By including nav_spacer() you can automatically adjust the spacing to center the title between the other elements of the bar.

Note that the src argument of tags$img() looks for the www directory, so place your images in that folder.

library(shiny)
library(bslib)

ui <- page_navbar(
    bg = "#4F2170",
    # first image
    nav_item(tags$img(
        src    = "Rlogo.png",
        width  = "64px",
        height = "auto"
    )),
    nav_panel(title = "Intro", page_fillable()),
    nav_panel(title = "Data"),
    nav_menu(
        title = "Summary",
        nav_panel(title = "Item 1"),
        nav_panel(title = "Item 2"),
        nav_panel(title = "Item 3")
    ),
    nav_spacer(),
    # title
    nav_item(
        HTML(
            '<div class="navbar-header"><span class="navbar-brand"> MY TITLE </span></div>'
        )
    ),
    nav_spacer(),
    # second image
    nav_item(tags$img(
        src    = "Rlogo.png",
        width  = "64px",
        height = "auto"
    ))

)

shinyApp(
    ui,
    function(input, output, session) {
        NULL
    }
)

I've used the same logo twice for the sake of simplicity.