Separate website logo-url from site-url

[daxkellie]

Description

I would like to add a logo and a title to my website, and I would like the logo to have a different url to the site title. However, this doesn't seem to be possible.

At the moment, I can add a separate logo and title by specifying the logo and the title on my _quarto.yml. The title and logo link to the main page of the website by default (for me this is https://www.labs.ala.org.au/).

website:
  title: "ALA Labs"
  logo: images/ala-brand-image.png

But I would like to have the brand logo link to a separate main site, while the title remain with the url to my main website https://www.labs.ala.org.au/. However, specifying the logo-url changes the href of both the logo and the title.

website:
  title: "ALA Labs"
  logo: images/ala-brand-image.png
  logo-url: https://www.ala.org.au/

(sorry it's hard to show this with a screenshot, but hovering on the .navbar-title [i.e. ALA Labs] displays the associated url (bottom-left) as the new url set by logo-url when I wouldn't expect it to)

Is it possible to separate the site-url from the logo-url? Thanks!

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

logo-url is not a valid option.
The correct option is logo-href as documented https://quarto.org/docs/reference/projects/websites.html#navbar and as documented it's for both logo and title.
Since, it's HTML, you can write a simple JavaScript script to change that.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[dbetebenner]

I was hoping for the same feature. I have a logo as well as a title for my R package. Currently in the navbar the logo and title are in the left of the navbar and link via the logo-href argument in _quarto.yml to the landing page of the package website. I'd prefer the URL associated with the logo to link to another/different site (the home page for the organization).

Here is my website:

https://centerforassessment.github.io/packageSkeleton/

And here is the GitHub repo for the R package and Quarto website (the website is housed in the directory quarto_website)

https://github.com/dbetebenner/packageSkeleton

I've tried to produce some Javascript work arounds but none has worked thus far.

[cderv]

And link via the logo-href argument in _quarto.yml to the landing page of the package website. I'd prefer the URL associated with the logo to link to another/different site (the home page for the organization).

I am not sure to follow why logo-href here is not set to your new link "to another/different site (the home page for the organization)" ? You can change this configuration to the url you want the link to go to.

[cderv]

I believe logo-href through navbar configuration is the way to set a custom link behind the logo.
See available https://quarto.org/docs/websites/website-navigation.html#top-navigation

Currently, it is using site-url home page (index.html) by default if no config logo-href is provided. Hence the default behavior observed.

Hope it helps

[dbetebenner]

Yes, logo-href does change the URL. But it changes it BOTH for classes navbar-brand-logo as well as navbar-title. What I think we're requesting is the ability to have different hrefs for the navbar logo and the navbar title. I don't see how to get different hrefs given the way Quarto sets up the navbar.

Thanks for any help.

[cderv]

Thanks for the precision.

quarto-cli/src/resources/projects/website/templates/navbrand.ejs

Lines 1 to 16 in 2bc956a

	<% if (navbar.title || navbar.logo) { %>
	<div class="navbar-brand-container mx-auto">
	<% if (navbar.logo) { %>
	<a href="<%- navbar['logo-href'] || '/index.html' %>" class="navbar-brand navbar-brand-logo">
	<img src="<%- navbar.logo %>" alt="<%- navbar['logo-alt'] || '' %>" class="navbar-logo" />
	</a>
	<% } %>
	<% if (navbar.title) { %>
	<a class="navbar-brand" href="<%- navbar['logo-href'] || '/index.html' %>">
	<span class="navbar-title"><%- navbar.title %></span>
	</a>
	<% } %>
	</div>
	<% } %>

we do use logo-href for both, so it is a feature request to add a new configuration for title (title-href ?) so that it can be different.

Currently only using JS to dynamically change the href seems to be a solution. Thanks for the feedback

EDIT: #11110

[cderv]

@daxkellie can you confirm you were talking about the same thing ?

[daxkellie]

Yes! That’s exactly right 🙂 Sorry for the mistake on my part, but @dbetebenner hit the nail on the head!