Add a button to website navbar

[juliasilge]

Description

I am wanting to add a button in the navbar of a Quarto website. If I create a website using quarto create project website button-in-navbar, I can edit the project YAML like this to make a button:

project:
  type: website

website:
  title: "button-in-navbar"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: https://quarto.org/
        text: "<span class='btn btn-primary'>Click here</span>"
      - href: about.qmd
        text: About us     

format:
  html:
    theme:
      - cosmo
      - brand
    css: styles.css
    toc: true

That does make a button, but the vertical alignment is not good:

Notice how "Home" and "About us" are too high, while the title and button are vertically aligned nicely. I tried using vertical-align: middle for various styles, but could not figure out how to make that apply to the links in the navbar.

How might I go about improving the vertical alignment in the navbar in this case?

[cscheid]

What you've done is totally reasonable, and our CSS would ideally work better. So I would start by debugging the CSS we get with the devtools.

With that said, I'll reiterate: I think it should work pretty much like you've done.

I also think we should have some syntax help for it, maybe something like a shortcode, eg {{< button type="primary" text="Click here" >}}.

[cscheid]

By inspecting the DOM and removing suspicious-looking classes, I can tell that (unsurprisingly) it's the btn class that's causing issues.

Here's a hack to get you unstuck:

---
title: "test-button-navbar"
---

```{=html}
<style>
    .menu-text:not(.btn) {
        margin: 0.375rem;
        position: relative;
        top: 0.375rem;
    }
    .menu-text.btn {
        top: inherit;
    }
    li.nav-item span.btn.btn-primary {
        position: relative;
        top: -0.375rem;
    }
</style>
```

This is a Quarto website.

To learn more about Quarto websites visit <https://quarto.org/docs/websites>.

It's not an entirely trivial thing for us to fix in pure CSS because the padding in .btn is what's causing the trouble, and we don't want to add that margin:0.375rem class unless there exists a button with that padding. I'm not good enough of a CSS wizard to figure out an elegant solution...

[mcanouil]

FYI, the documentation on bootstrap buttons: https://getbootstrap.com/docs/5.3/components/buttons/