Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Transparent Navigation Folder Links - Squarespace 7.1


Question

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

Link to comment

8 answers to this question

Recommended Posts

  • 0
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; }

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

walkerton-physio.squarespace.com-01-min.

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

walkerton-physio.squarespace.com-02-min.

3. (Tablet-Footer) change footer layout?

walkerton-physio.squarespace.com-03-min.

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

walkerton-physio.squarespace.com-04-min.

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

walkerton-physio.squarespace.com-05-min.

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

walkerton-physio.squarespace.com-06-min.

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

walkerton-physio.squarespace.com-07-min.

8. (Mobile-Contact) Fix this issue?

walkerton-physio.squarespace.com-08-min.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

walkerton-physio.squarespace.com-01-min.

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

walkerton-physio.squarespace.com-02-min.

3. (Tablet-Footer) change footer layout?

walkerton-physio.squarespace.com-03-min.

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

walkerton-physio.squarespace.com-04-min.

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

walkerton-physio.squarespace.com-05-min.

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

walkerton-physio.squarespace.com-06-min.

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

walkerton-physio.squarespace.com-07-min.

8. (Mobile-Contact) Fix this issue?

walkerton-physio.squarespace.com-08-min.

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

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...