I have the following UI:

ui <- navbarPage(
  title="Foo",
  fluid=T,
  
  # For positioning of the progress bar notification
  tags$head(
    tags$style(HTML(
      ".shiny-notification {
        height: 100px;
        width: 800px;
        position:fixed;
        top: calc(50% - 50px);
        left: calc(50% - 100px);
      }"
    )),
    # tags$style for font size of column headers
    tags$style(HTML(
      ".dataTables_wrapper th {
        font-size: 10px;
      }"
    )),
    # tags$link and tags$script are included so that we can use KaTeX to render LaTeX in DataTables
    tags$link(
      rel = "stylesheet",
      href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css",
      integrity = "sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ",
      crossorigin = "anonymous"
    ),
    tags$script(
      defer = "",
      src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js",
      integrity = "sha384-VQ8d8WVFw0yHhCk5E8I86oOhv48xLpnDZx5T9GogA/Y84DcCKWXDmSDfn13bzFZY",
      crossorigin = "anonymous"
    )
  ),
  useShinyjs(),  # must be called once for progress bar and similar elements to work

  someOtherUiElement()
)

The navbarPage is misinterpreting the sections using tags$head and useShinyjs for UI elements, so it ends up creating these kind of invisible, square-shaped, non-functional UI elements to the left of the actual UI button. How can I prevent this from happening? The attached screenshot shows the part of the navigation pane that this refers to. I have circled the area where the two invisible elements are located and have selected the one to the right.