Nav Sign In Button to Icon

Site URL: https://www.youcandoitsales.com/

Hi! I'm hoping to change the Sign in Button to an icon, but can't figure out any CSS that works. 

(I have some CSS active that's making the top links stretch out which is making the button go off the page. )

Any help is appreciated. Site is live. Thanks: https://www.youcandoitsales.com/

Add to Design > Custom CSS

header#header a.btn {
    border: none !important;
    background-color: transparent !important;
    color: transparent !important;
    background-image: url(https://cdn.pixabay.com/photo/2022/08/01/21/34/pedestrian-7359030__480.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Omg thank you so much @tuanphan It worked perfectly!

@tuanphan I have another question for you. I found your solution to creating a header above navigation and it works perfectly here (https://forum.squarespace.com/topic/154697-place-my-navigation-bar-over-image-and-200px-lower/ . I'm wondering how to put the text over the image like in the demo. Like "Harlow" and "+Scroll to Explore". http://harlow.thebuffalocollective.com/

My website is youcandoitsales.com

Thanks!

On 11/4/2022 at 4:01 AM, andreavictory said:

@tuanphan I have another question for you. I found your solution to creating a header above navigation and it works perfectly here (https://forum.squarespace.com/topic/154697-place-my-navigation-bar-over-image-and-200px-lower/ . I'm wondering how to put the text over the image like in the demo. Like "Harlow" and "+Scroll to Explore". http://harlow.thebuffalocollective.com/

My website is youcandoitsales.com

Thanks!

 

I Just did this for a member yesterday.

But this will require JavaScript code. We will add a Section under Header, you can add text or any thing. Then I will use script code to change order of header - that section + make header sticky on scroll.

What do you think?

Here is a demo with slider above nav

https://blank-test.squarespace.com/slider2?noredirect

pass: abc