Modify content of _quarto.yml and/or styles.css for my Quarto website development

Attached here are two screenshots. The one I write 1 and 2 is my desire for the left hand side header while the second contains what I want on the left hand side on the blue header. My focus is on the content of the blue header on my Quarto website. On the left of the blue header, I want Left side → ☰ hamburger + logo.

Right side → LinkedIn, WhatsApp, YouTube icons in white.

Clicking ☰ shows About Me, Research, Publications, Teaching, Blog, Contact. I want on the same row, hamburger menu (3 lines) which should house the "About Me", "Research", "Publications", "Teaching", "Blog", and "Contact", followed by the logo still on the left and the Social icons (LinkedIn, WhatsApp, YouTube) all in white for a uniform look all at the right. Every other thing should remain the same.

  [![Rigth hand side of what I want](https://i.sstatic.net/JpuVINZ2.png)](https://i.sstatic.net/JpuVINZ2.png)

Here is my -quarto.yml:

project:
  type: website

website:
  title: ""   # no site title text
  navbar:
    background: "#1A3D7C"
    logo: images/logo.png
    collapse-below: xl   # force hamburger even on wide screens
    left:
      - text: ""         # 👈 no label, just the hamburger icon
        menu:
          - text: "About Me"
            href: about.html
          - text: "Research"
            href: research.html
          - text: "Publications"
            href: publications.html
          - text: "Teaching"
            href: teaching.html
          - text: "Blog"
            href: posts/
          - text: "Contact"
            href: contact.html
    right:
      - icon: linkedin
        href: https://www.linkedin.com/in/jamesdan
      - text: "WhatsApp"   # CSS replaces with SVG icon
        href: https://wa.me/2348033147591
      - icon: youtube
        href: https://www.youtube.com/@TheRWay-m6s

format:
  html:
    theme: cosmo
    css: styles.css
    toc: false

Here is my styles.css:

/* css styles */

/* Hide "MENU" text */
.navbar-toggler-icon::after {
  content: "";
}

/* Resize navbar logo.png */
.navbar-brand img {
  max-height: 40px;  /* adjust size */
  width: auto;
}

/* WhatsApp icon styled in white to match other navbar icons */
.navbar a[href*="wa.me"] {
  font-size: 0; /* hide the "WhatsApp" text */
}

.navbar a[href*="wa.me"]::before {
  content: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/whatsapp.svg');
  display: inline-block;
  height: 22px;
  width: 22px;
  vertical-align: middle;
  filter: brightness(0) invert(1); /* force icon to white */
}