Jump to content

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

Recommended Posts

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?

 

 

Link to comment
  • Replies 4
  • Views 248
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Screenshot 2022-09-30 19.04.50.png

Edited by ErinD
Link to comment

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.