Getting social icons + "button" to show on mobile?

Site URL: http://annauma.ca/home-iku

Hello!

I've gotten pretty much everything I need on my site now, and it works great on desktop! And on mobile for the most part, save for two things I'd like to solve:

• Make last nav menu a "button", and
• Add social icons but hide one + change logo

I have this achieved on the desktop version. On the home page, you'll see one social icon hidden and one that says "IKU" - when you click on IKU, it takes you to the Inuktitut version of the site, and the original button is now hidden and a replacement "button" is there made from css code.

On mobile, that replacement "button" is just a regular nav link and the social icons don't show up at all.

English home page is annauma.ca password annauma

IKU  version is annauma.ca/home-iku

Code for the social icon hide/replace logo that works on desktop:

.icon[href*="http://annauma.ca/home"] svg {
  visibility:hidden;
}
  .icon[href*="http://annauma.ca/home-iku"]  svg {
  visibility:hidden;
}
.icon[href*="http://annauma.ca/home-iku"] {
background-image: url(https://static1.squarespace.com/static/62227612c34bc74d480c8bc0/t/63310641bdd1660630c7494a/1664157249175/EN+%281%29.png);
    background-size: cover;
    background-repeat: no-repeat;
    transform:scale(1.25);
}

(vice versa for the English icon)

And code for the "button" that works on desktop:

  .header-nav-item [href*="/donate-iku"] {
    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;
}
nav.header-nav-list {
    align-items: center;
}
  .header-nav-item--active a{background-image:none!important}
  
  /* Hide eng donate */
  .btn[href*="/donate"] { display: none !important; }

How might I use this for mobile too?

#1. Change this class name

 .header-nav-item [href*="/donate-iku"]

to this

header#header [href*="/donate-iku"]

#2. Where is social icons?

21 hours ago, tuanphan said:

#1. Change this class name

 .header-nav-item [href*="/donate-iku"]

to this

header#header [href*="/donate-iku"]

#2. Where is social icons?

That worked great, thanks!

The social icons are on desktop, I circled them for easier visibility in the attachment. But they don't show anywhere on mobile.   Beside the "IKU" on the left there's an "EN" one, but it's hidden. And then on the other language home page, the EN shows and the IKU is hidden.

I see you haven't added code for 2 icons. I see 1 code only

.icon[href="http://annauma.ca/home"] {
    background-image: url(https://static1.squarespace.com/static/62227612c34bc74d480c8bc0/t/63310644330b1d05dbb1b806/1664157252435/EN.png);
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
}

Can you check it again?

15 hours ago, tuanphan said:

I see you haven't added code for 2 icons. I see 1 code only

.icon[href="http://annauma.ca/home"] {
    background-image: url(https://static1.squarespace.com/static/62227612c34bc74d480c8bc0/t/63310644330b1d05dbb1b806/1664157252435/EN.png);
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
}

Can you check it again?

I'm not sure I understand. This is the code that works to hide the IKU symbol and show the EN symbol on the home-iku (or any inuktitut page) :

.icon[href*="http://annauma.ca/home"] svg {
  visibility:hidden;
}
  .icon[href*="http://annauma.ca/home-iku"]  svg {
  visibility:hidden;
}
.icon[href*="http://annauma.ca/home-iku"] {
background-image: url(https://static1.squarespace.com/static/62227612c34bc74d480c8bc0/t/63310641bdd1660630c7494a/1664157249175/EN+%281%29.png);
    background-size: cover;
    background-repeat: no-repeat;
    transform:scale(1.25);
}

As you can see, I hide the original icons, both of them, then show the one with a different image that I want to show up on that page.