ghemachandar

@ghemachandar Thanks for your help. I contacted squarespace support. Apparently it's a known issue. The workaround is to place a space in the tagline box under design>logo & title. This seems to have fixed it for now.
Thanks again!

See attached image. When I first visited the site (or visited after clearing browser cache) the menu was working properly. It is only after multiple open-closes that the problem you cited appears.
I'm afraid, this could be some malfunction on the part of Squarespace and can only be resolved by them.

For one, it should be @font-face

In which case, we must apply the code only to desktop resolutions:
@media screen and (min-width: 641px){ #navigator .siteTitle { padding: 20px 0; /* Change 20px value if necessary */ } #container{ margin-top:100px !important; /* Change 100px value if necessary */ } }  

See attached video. It appears the problem can be resolved by reducing logo padding AND container margin.
Try putting this code in DESIGN > Custom CSS:
#navigator .siteTitle {
    padding: 20px 0; /* Change 20px value if necessary */
}
#container{
  margin-top:100px !important; /* Change 100px value if necessary */
}
ice_video_20220629-170430.mp4

Can you try this code?:
.list-item .list-item-media{
  filter: drop-shadow(5px 5px 5px #000000);
}
The list-item-media class ensures that the property applies only to the images.

Actually, try this one:
@media screen and (max-width: 640px){
#page-60db4a11f2dfbb34602d3bd0.sqs-layout [class*=sqs-col] {
  float: left !important;
  width: 50% !important;
}
}

That is content padding. Put the following code **in that page settings only**:
<style>
.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section).section-height--medium>.content-wrapper {
    padding-top: 3.3vmax;
}
</style>
3.3vmax value is put by me. You can try px or em too. Default was 6.6vmax.

You could replace the div with something like the following.
.gallery-grid-item-wrapper {   overflow : hidden;   } Let us know how it goes.

Looks like this part of the code is causing the problem:
div
{
  overflow:hidden !important;
}
Can you remove it and test. Obviously, now the gallery effect will be broken but if you provide the page url we can suggest what to replace this code with.

Oh! So, you need just the background image removed? Please try this:
@media screen and (max-width:767px) {
/* hide welcome banner */
#collection-609b09827e0a8b72f5bf4e21 .Parallax-host .Parallax-item:nth-child(2){
  display: none;
}
}

I found an 'id' not a 'data-section-id'. Try this?:
@media screen and (max-width:767px) {
/* hide welcome banner */
[id="whatisworqflow-with-banner"] {
    display: none;
}
}

That is content padding. Put the following code **in that page settings only**:
<style>
.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section).section-height--medium>.content-wrapper {
    padding-top: 3.3vmax;
}
</style>
3.3vmax value is put by me. You can try px or em too. Default was 6.6vmax.

You can use this code to change hover mask color:
.social-icons-color-black.social-icons-style-knockout .sqs-svg-icon--list:hover .sqs-use--mask {
    fill: red;
}