Search code examples
r-markdownblogdownquarto

How to hide website title in quarto when using a title-block-banner?


I use a simple setup of a quarto website in R. The code is on GitHub https://github.com/EUV-student/history The site is on GitHub Pages https://euv-student.github.io/history/ I use a title-block-banner. The website title overlays the banner and is unreadable and redundant, since I can see the title in the navigation bar. How can I get rid of the midway website title?

enter image description here

For completeness, my _quarto.yml is:

project:
  type: website
  output-dir: docs
  
website:
  title: "Medienagentur Geschichte"
  cookie-consent: true
  navbar:
    left:
      - href: index.qmd
        text: Home
      - Aktuelles.qmd
      - Fernsehen.qmd
      - Hoerfunk.qmd
      - Kontakt.qmd
    background: "light"
 
  sidebar:
    logo: "Images/FM3_3911.jpg"
    pinned: true
    align: center
    header: "Dr. Tillmann Bendikowski"
    footer: "Leiter der Medienagentur Geschichte und erster Ansprechpartner für alle Fragen."
    
  page-footer:
    left: "2022"
    right: 
      - href: Datenschutz.qmd
      - href: Impressum.qmd
    
format:
  html:
    theme: simplex
    css: styles.css
    toc: false
    title-block-banner: "Images/banner_books_wide.png"
    title-block-style: default
    title-block-categories: false
    title-block-banner-color: body
    
editor: visual

Solution

  • Add the following in your styles.css file.

    .quarto-title > h1.title {
      opacity: 0 !important;
    }
    

    Then the rendered website looks like,


    without the overlayed website title