changing social icons to text?

website: roseandcodesign.ca

My desktop menu and mobile menu are the same. How can I change the social icons to be text instead? 

Try this as a start:

.header-menu-actions {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
}
.header-menu-actions .icon svg {
    display:none;
}
.header-menu-actions a[href="http://instagram.com/indoorwife"]:before {
  content:'instagram';
}
.header-menu-actions a[href="http://mailto:hello@roseandcodesign.ca"]:before {
  content:'email';
}

4 minutes ago, Ziggy said:

Try this as a start:

.header-menu-actions {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
}
.header-menu-actions .icon svg {
    display:none;
}
.header-menu-actions a[href="http://instagram.com/indoorwife"]:before {
  content:'instagram';
}
.header-menu-actions a[href="http://mailto:hello@roseandcodesign.ca"]:before {
  content:'email';
}

 

Like I said, a start, would be useful to see the code so I can offer adjustments, but try this:

header-menu-actions-action .icon {
    height: auto;
    width: auto;
}

@Ziggy I also tried this but obv instragram isn't linked to anything so it doesn't work but it's the closest I could get haha

/*add paragraph in menu*/
.header-menu-nav-folder:before {
        display: block;
        content: "instagram";
        font-family: 'aktiv-grotesk';
        font-size: 14px;
        line-height: 1.5em;
        letter-spacing: 0em;
        color: #1b1b1b;
        width: 70%;
        margin: auto !important;
        position: relative;
        top: 60vh;
    text-align: justify;  /* For Edge */
    text-align-last: right;
    }

5 minutes ago, Ziggy said:

Like I said, a start, would be useful to see the code so I can offer adjustments, but try this:

header-menu-actions-action .icon {
    height: auto;
    width: auto;
}

 

Could you leave the code on the website so I can view it live?

Just now, Ziggy said:

Could you leave the code on the website so I can view it live?

Yep for sure! Which one? 

The main piece that needs some additions and adjustments. 

12 minutes ago, Ziggy said:

The main piece that needs some additions and adjustments. 

The one you first posted or the one I tried to come up with? Just want to make sure I'm putting in the correct one for you. 

Yours:

.header-menu-actions {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
}
.header-menu-actions .icon svg {
    display:none;
}
.header-menu-actions a[href="http://instagram.com/indoorwife"]:before {
  content:'instagram';
}
.header-menu-actions a[href="http://mailto:hello@roseandcodesign.ca"]:before {
  content:'email';
}

Mine: 

/*add paragraph in menu*/
.header-menu-nav-folder:before {
        display: block;
        content: "instagram";
        font-family: 'aktiv-grotesk';
        font-size: 14px;
        line-height: 1.5em;
        letter-spacing: 0em;
        color: #1b1b1b;
        width: 70%;
        margin: auto !important;
        position: relative;
        top: 60vh;
    text-align: justify;  /* For Edge */
    text-align-last: right;
    }

The one I gave you.

2 minutes ago, Ziggy said:

The one I gave you.

Done! I added:

//*ziggy 1*//
.header-menu-actions {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
}
.header-menu-actions .icon svg {
    display:none;
}
.header-menu-actions a[href="http://instagram.com/indoorwife"]:before {
  content:'instagram';
}
.header-menu-actions a[href="http://mailto:hello@roseandcodesign.ca"]:before {
  content:'email';
}

//*ziggy 2*//
header-menu-actions-action .icon {
    height: auto;
    width: auto;
}

Here's some more code to add to the rest

.header-menu-actions-action .icon {
    height: auto !important;
    width: 100% !important;
}
.header-menu-actions {
    align-items: flex-end;
}
.header--menu-open .header .header-icon {
    font-family: 'aktiv-grotesk';
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0em;
    color: #1b1b1b;
}

You can remove this:

12 minutes ago, sb9201 said:

//*ziggy 2*//
header-menu-actions-action .icon {
    height: auto;
    width: auto;
}

3 minutes ago, Ziggy said:

Here's some more code to add to the rest

.header-menu-actions-action .icon {
    height: auto !important;
    width: 100% !important;
}
.header-menu-actions {
    align-items: flex-end;
}
.header--menu-open .header .header-icon {
    font-family: 'aktiv-grotesk';
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0em;
    color: #1b1b1b;
}

You can remove this:

Updated!

Looks pretty good. Though I should have put "say hello" instead of "email". Happy with my help?

2 minutes ago, Ziggy said:

Looks pretty good. Though I should have put "say hello" instead of "email". Happy with my help?

All good! I changed it to "say hello" but unfortunately it's just linking back to my website instead of the mailto: action. Do you know how to fix that bit? 

Strange, the CSS hasn't changed the functionality, does it work correctly without the Custom CSS?

8 minutes ago, Ziggy said:

Strange, the CSS hasn't changed the functionality, does it work correctly without the Custom CSS?

I removed this part of the css and it disappears altogether:

.header-menu-actions a[href="http://mailto:hello@roseandcodesign.ca"]:before {
  content:'say hello';
}

19 minutes ago, Ziggy said:

What happens without any of the code affecting the navigation icons? I suspect there's a problem with how you set it up since the icon was a LINK and not an EMAIL icon.

Ah you were totally right - I had it set up as a link and not an email in my social links settings. Fixed I think! Thank you so much for all of your help Ziggy! 

1 minute ago, sb9201 said:

Thank you so much for all of your help Ziggy! 

Not a problem! You know where to find me if you need anything else.