How can I add a pill-shaped donate button to my Dawn theme header?

Store Design
16

Hi @tshark ,

You can replace code above with code below:

body .header__inline-menu {
    display: block;
}
body .header__inline-menu .list-menu--inline>li:last-child > a span,
body .header__inline-menu .list-menu--inline>li:last-child > a{
    text-decoration: none;
    position: relative;
}
body .header__inline-menu .list-menu--inline>li:last-child > a:after {
    content: "";
    position: absolute;
    top: var(--buttons-border-width);
    right: var(--buttons-border-width);
    bottom: var(--buttons-border-width);
    left: var(--buttons-border-width);
    z-index: 1;
    border-radius: var(--buttons-radius);
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.3px, rgba(0, 0, 0, 0) 0px 0px 0px 1px;
}
body .header__inline-menu .list-menu--inline>li:last-child > a:hover:after{
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 2.3px, rgba(0, 0, 0, 0) 0px 0px 0px 2px;
}
@media screen and (min-width: 990px) {
    body .header--middle-left {
        grid-template-columns: auto 1fr;
    }

    body .header__inline-menu .list-menu--inline {
        min-width: 100%;
    }

    body .header__inline-menu .list-menu--inline>li:last-child {
        margin-left: auto;
    }
}

@media screen and (max-width: 989px) {
    body .header__inline-menu .list-menu--inline>li {
        display: none;
    }

    body .header__inline-menu .list-menu--inline>li:last-child {
        display: block;
    }

    body .header {
        grid-template-areas: "left-icons heading navigation icons";
        grid-template-columns: 1fr 2fr;
    }

    body #menu-drawer .menu-drawer__navigation .menu-drawer__menu>li:last-child {
        display: none;
    }
}