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?

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.

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.

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.

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.