Help with making header customization visible on mobile

Hello, I have a website that I have in two languages and so i hide header items depending on which language you're on. Because you can only have one button in the header, I have created a "fake" button in the other language, which works great except it doesn't show on mobile. I'm just hoping you can tell me how to add this exact same experience for the mobile item.

Password for the site is annauma

  /* Make donate button */
  header#header [href*="/donate-iu"] {
    color: #000000 !important;
    border-color: #faa524 !important;
    background: #faa524;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;
    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
    font-family: 'BARLOW SEMIBOLD';
    font-weight: 700;
    font-size: 16px;
    font-style: normal;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2em;
    padding: .86em 1.6032em !important;
}

Hi,

What is site url?

Oh weird, sorry! I included it in the field on the post but it didn't show up. However, miraculously it's working now lol! So crisis averted.