Custom CSS (Burger menu TO Arrow Instead)

Hello Everyone,

I am trying to change the burger menu on the top right of my website to an arrow. I am on Squarespace 7.0. Any help would be greatly appreciated. I have been able to change the three lines into 3 arrows but I would much rather one arrow.

Thank you

Sean 

11 hours ago, SeanSEO said:

Hello Everyone,

 

I am trying to change the burger menu on the top right of my website to an arrow. I am on Squarespace 7.0. Any help would be greatly appreciated. I have been able to change the three lines into 3 arrows but I would much rather one arrow.

Thank you

Sean 

Can you share your website URL?

www.spacebetweencounselingservices.com thank you for any help you can provide! 

Apply this code into custom css:

.force-mobile-nav .mobile-nav-toggle .top-bar, .force-mobile-nav .mobile-nav-toggle .middle-bar, .force-mobile-nav .mobile-nav-toggle .bottom-bar{
	background-color: unset !important;
}

.middle-bar::after {
    content: "\21E6";
}

.mobile-nav-open .mobile-nav-toggle .top-bar, .mobile-nav-open .mobile-nav-toggle .bottom-bar{
	background-color: #fff !important;
}

3 minutes ago, yubrajs said:

Apply this code into custom css:

.force-mobile-nav .mobile-nav-toggle .top-bar, .force-mobile-nav .mobile-nav-toggle .middle-bar, .force-mobile-nav .mobile-nav-toggle .bottom-bar{
	background-color: unset !important;
}

.middle-bar::after {
    content: "\21E6";
}

.mobile-nav-open .mobile-nav-toggle .top-bar, .mobile-nav-open .mobile-nav-toggle .bottom-bar{
	background-color: #fff !important;
}

 

thank you! Is there a code for an arrow that points down? Do you  have a site that has arrow codes?

thank you!

actually I just found it! thank you again for your help!!!

You can find it here use css code:

https://www.toptal.com/designers/htmlarrows/arrows/

1 minute ago, yubrajs said:

You can find it here use css code:

https://www.toptal.com/designers/htmlarrows/arrows/

ok so it worked on desktop however on mobile it looks as though the arrow is ontop of the burger....as if the burger is not "blocked"

Remove ".force-mobile-nav" from the code:

.mobile-nav-toggle .top-bar, .mobile-nav-toggle .middle-bar, .mobile-nav-toggle .bottom-bar{
	background-color: unset !important;
}

yes I was able to get that as I tinkered with it a minute. So sorry to keep bothering you but now the top lines and bottom lines are gone on mobile but I still have the middle arrow showing. Sorry I am newer to square space. 

thank you!

figured it out! Thank you again for all your help!