Jump to content

Cookie banner BUTTON POSITION + Extended clickable area in OVERLAY MENU

Go to solution Solved by tuanphan,

Recommended Posts


Hello!☺️

I have 2 problems.

1) Cookie banner:

I want the disclaimer text to be side-by-side with the "got it" button. As you can see in the image, the button floats in the lower right corner instead of being aligned with the text.


2) Overlay menu clickable close area

I would like to extend the clickable area to close the overlay menu to the red zone I have drawn in the picture (instead of the minuscule close icon).


Thank you so much for taking the time to help me.

Code to enter website: go

 

css1.jpg

css4.jpg

 

Edited by Jmontison
Link to comment
  • Jmontison changed the title to Cookie banner BUTTON POSITION + Extended clickable area in OVERLAY MENU
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

#1. I see you disabled cookie text. Can you enable it? We can check easier

#2. Add this code to Website > Website Tools > Custom CSS

body.header--menu-open .header-burger, body.header--menu-open .header-burger button {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 999999;
    width: 20%;
}

 

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
  • Solution
On 11/19/2023 at 9:27 AM, Jmontison said:

Hi Tuanphan! 

Wow, that worked perfectly! Thank you so much for your amazing help! 😁

You should be able to see the cookie banner now.

 

Use this CSS code

@media screen and (max-width:767px) {
.sqs-cookie-banner-v2.POPUP.DARK.BOTTOM_RIGHT.BUTTON.OPT_IN {
    display: flex;
    align-items: flex-start;
}
}

image.png.bc5268a1d430a1e07d5495957a841b3b.png

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

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.