navbar of shiny app interferes with navbar of rmarkdown webpage

I am starting a webpage for my lab, and among the products we have developed is a shiny app to check the global climate change.

Here is the website in that page and this is how the app looks standalone as you can see in the menu there are three options that are not seen in the website, in the intro tab, the Intro, Workflow, About and Changelog should be visible

Website yaml

I made a webpage using classic rmarkdown website building, so my webpage yaml looks like this:

name: "Sitio web de ecoinformática del laboratorio Marquet"
navbar:
  title: "Ecoinformática"
  left:
    - text: "Home"
      href: index.html
    - text: "Sobre nosotros"
      href: about.html
    - text: "GCM compareR app"
      href: GCMcompareR.html
    - text: Docencia
      icon: fa-gear
      menu:
      - text: Ecología BIO231c 
      - text: Modulo 1.1
        href: Modulo1.1.html
      - text: Modulo 1.2
        href: Modulo1.2.html
    - text: RPackages
      icon: fa-gear
      menu:
      - text: RPackages
      - text: NetworkExtinction
        href: VignetteNetworkExt.html
output_dir: "."
output:
  html_document:
    theme: cosmo
    highlight: textmate
    include:
    css: styles.css

Actual app Rmd

And in the tab of GCM compareR app I have the following:

---
title: ""
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE) 
```

<iframe src="http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/"style="border: 0; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%"">

Solutions that might work but cant figure out

  • Add a padding on the top to prevent both navbars to generate conflicts
  • Remove the navbar of the website when I go to the app webpage
  • Make the navbar of de website "deployable", so that it only appears when I move the cursor to the edge of the webpage
  • change the navbar of the webpage to the left.

What I have tried:

Changing the borders :

<iframe src="http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/"style="border: 100; position:absolute; top:100; left:0; right:0; bottom:0; width:100%; height:100%"">

make the app responsive

<div class="resp-container">
    <iframe class="resp-iframe" src="http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/" style="border: 100; position:absolute; top:100; left:0; right:0; bottom:0; width:100%; height:100%"">

use include_app

```{r}
knitr::include_app("http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/", height = "600px")
```

Which kind of works, but I can't fix the width

Any help would be welcome