Transparent Navigation Folder Links - Squarespace 7.1

Site URL: https://walkerton-physio.squarespace.com/

I've been using custom css on this site to create unique folder hover shape/colour and I can't seem to get the dropdown folders in the top nav to remain transparent all the time. It usually works when I have the css panel open, but it's not reliable and staying connected to my css all the time. Anyone know a fix?

This is the code I've been using:
body:not(.header--menu-open) .dark .header-nav-folder-content {
  background-color: rgba(0,0,0,0.0);}

Site Password: Blvd-WP

1 hour ago, BoulevardNorth said:

Site URL: https://walkerton-physio.squarespace.com/

I've been using custom css on this site to create unique folder hover shape/colour and I can't seem to get the dropdown folders in the top nav to remain transparent all the time. It usually works when I have the css panel open, but it's not reliable and staying connected to my css all the time. Anyone know a fix?

This is the code I've been using:
body:not(.header--menu-open) .dark .header-nav-folder-content {
  background-color: rgba(0,0,0,0.0);}

Site Password: Blvd-WP

Simply add !important after the color or use below code
body:not(.header--menu-open) .dark .header-nav-folder-content {
  background-color: transparent !important; }

On 5/19/2021 at 4:10 AM, BoulevardNorth said:

Site URL: https://walkerton-physio.squarespace.com/

I've been using custom css on this site to create unique folder hover shape/colour and I can't seem to get the dropdown folders in the top nav to remain transparent all the time. It usually works when I have the css panel open, but it's not reliable and staying connected to my css all the time. Anyone know a fix?

This is the code I've been using:
body:not(.header--menu-open) .dark .header-nav-folder-content {
  background-color: rgba(0,0,0,0.0);}

Site Password: Blvd-WP

Also, do you need to fix these? We will give the code

Site URL – https://walkerton-physio.squarespace.com/

1. (Tablet-Homepage) Make button same line?

2. (Tablet-Homepage) Increase text/buttons width?

3. (Tablet-Footer) change footer layout?

4. (Mobile-Homepage) Change order of text/button?

5. (Mobile-Header) Click burger, no thing appear?

6. (Tablet-Header) Click burger, nothing appear

7. (Scroll up header) Change burger, logo to white on scroll up header?

8. (Mobile-Contact) Fix this issue?

On 5/21/2021 at 11:52 AM, tuanphan said:

Also, do you need to fix these? We will give the code

Site URL – https://walkerton-physio.squarespace.com/

1. (Tablet-Homepage) Make button same line?

2. (Tablet-Homepage) Increase text/buttons width?

3. (Tablet-Footer) change footer layout?

4. (Mobile-Homepage) Change order of text/button?

5. (Mobile-Header) Click burger, no thing appear?

6. (Tablet-Header) Click burger, nothing appear

7. (Scroll up header) Change burger, logo to white on scroll up header?

8. (Mobile-Contact) Fix this issue?

Sure - I would appreciate any helpful suggestions you'd like to provide for the custom css required. @tuanphan 

On 6/4/2021 at 5:45 AM, BoulevardNorth said:

Sure - I would appreciate any helpful suggestions you'd like to provide for the custom css required. @tuanphan 

Q1. 2. 7 It looks like you solved?

Q3. You can describe the desired layout. We will give the code

Q4.Q8. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* q4-Home-buttons */
section[data-section-id="60a3ce53eff4662023d02a95"] .sqs-row {
    display: block;
}
/* q8-contact */
section[data-section-id="60a421ddba055009106a58f6"] .sqs-row {
    display: block;
}
}

Q5. 6. If you remove back drop filter, the header will work. Or we can remove it on mobile/tablet only? What do you think?

.header {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgb(100 100 100 / 30%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

@tuanphan - Are you able to help with the mobile design styles for my site? The top left menu doesn't open for my client on mobile, but it works on my iPhone. I'm unsure how to adjust or fix this on Squarespace 7.1. Thanks!!

Link: https://walkerton-physio.squarespace.com/
PW: Blvd-WP

On 6/22/2021 at 10:18 PM, BoulevardNorth said:

@tuanphan - Are you able to help with the mobile design styles for my site? The top left menu doesn't open for my client on mobile, but it works on my iPhone. I'm unsure how to adjust or fix this on Squarespace 7.1. Thanks!!

Link: https://walkerton-physio.squarespace.com/
PW: Blvd-WP

Hi. I had similar problem a few months ago & can't find the fix. The only way is disable header effect on mobile only. If you want this, find this code

.header {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important
}

.header.shrink {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important
}

change it to

@media screen and (min-width:992px) {
   .header {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important
}

.header.shrink {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important
} 
}

With other problems, it look like you fixed some?

12 hours ago, tuanphan said:

Hi. I had similar problem a few months ago & can't find the fix. The only way is disable header effect on mobile only. If you want this, find this code

.header {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important
}

.header.shrink {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important
}

change it to

@media screen and (min-width:992px) {
   .header {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important
}

.header.shrink {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important
} 
}

With other problems, it look like you fixed some?

Hmmmm... I've tried adding that code but it still wasn't working unfortunately. The nav bar still wont open on android. Works fine on iPhone though.

On 6/24/2021 at 10:57 PM, BoulevardNorth said:

Hmmmm... I've tried adding that code but it still wasn't working unfortunately. The nav bar still wont open on android. Works fine on iPhone though.

Can you share the code which you used to add header effect?