Adding a Graphic to Mobile Menu Overlay

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

Howdy!

I'd like to add a graphic to the mobile menu overlay for a client's site. I can't seem to find coding for this in these forums or elsewhere. I've mocked up what I'd like it to look like, see attached!

Thanks. 🙂

This is possible, however what is password

7 hours ago, tuanphan said:

This is possible, however what is password

RENEGADE

Add to Design > Custom

[data-folder="root"]:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/6313b633f0dd754d450d5743/1ab9011c-0bf6-4307-9eec-06288fe1a50e/rnco_capital_polpo_light_1.png?format=300w);
    display: block;
    width: 100px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

CSS

On 10/2/2022 at 6:32 PM, tuanphan said:

Add to Design > Custom

[data-folder="root"]:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/6313b633f0dd754d450d5743/1ab9011c-0bf6-4307-9eec-06288fe1a50e/rnco_capital_polpo_light_1.png?format=300w);
    display: block;
    width: 100px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

CSS

 

Thanks so very much! This worked great.

I dropped the size to 50px and 35px which feels right. I'd like to nudge it down a bit lower though too... how might I do that?

On 10/8/2022 at 12:51 AM, MadcapCreative said:

Thanks so very much! This worked great.

I dropped the size to 50px and 35px which feels right. I'd like to nudge it down a bit lower though too... how might I do that?

Try this new code

[data-folder="root"]:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/6313b633f0dd754d450d5743/1ab9011c-0bf6-4307-9eec-06288fe1a50e/rnco_capital_polpo_light_1.png?format=300w);
    display: block;
    width: 100px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
	position: relative;
	bottom: -30px;
}