Search code examples
htmlcssrjupyter-notebookquarto

Navbar text color quarto

project: 
  type: website
  output-dir: docs

website: 
  title: "Driving Adoption: Smart Manufacturing Technologies"
  back-to-top-navigation: true
  page-footer:
    background: "#f1f1f1"
    foreground: "#164a58"
    left: 
      - text: "GitHub Repo"
        url: "https://github.com/wsuppmc/driving-adoption-metrics"

  navbar: 
    background: "#f1f1f1"
    foreground: "#164a58"
    search: true
    link: false
    right: 
      - text: "Home"
        href: Quartopage.qmd
  

format: 
  html:
    embed-resources: true
    page-layout: full
    toc: false
    css: styles.css
    footer: footer.html

I want to change the color of "Home" to be #164a58, how do I do it since it's in the nav bar

I tried

.navbar .nav-item a[text='Quartopage.qmd'] {
  color: #164a58;
}

I was expecting it to work

Solution

  • If you want to change the color specifically for Home associated with Quartopage.qmd, try the following,

    .navbar li.nav-item a.nav-link a[href*="Quartopage.html"] span {
  color: #164a58 !important;
}

    And if you want to change the color for all link text in navbar, try the following instead,

    .navbar li.nav-item a.nav-link span {
  color: #164a58 !important;
}