Elise__

Dear @tuanphan, 
Thank you for your reply 🙂 I tried your code, however the effect is not what I had in mind . I managed to come close with the code below (see also my site). However I still face two problems;
1. The underline under the navigation is quite far from the title. How do I decrease this distance so that the underline is directly under the title ? 
2. For the mobile navigation, the animation takes the entire mobile screen. How can I adjust it so that it only underlines the title? 
/* navigation underline animation */ .header-nav-item::after { content: ''; background: #FFFFFF; //color height: 2px; //thickness width: 0; display: block; margin-top: 0px !important; transition: width 0.5s; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; } /* mobile navigation underline animation */ .header-menu-nav-item::after { content: ''; background: #FFFFFF; //color height: 2px; //thickness width: 0; display: block; margin-top: 5px !important; transition: width 0.5s; //animation speed margin: 0.6 auto; } .header-menu-nav-item:hover::after { width: 100%; } .header-menu-nav-item--active a { background-image: none !important; }  

@LukasEriksen This works when inserted into Settings->Advanced->Code Injection:

You can test by scrolling with your up/down arrow keys and see how it's smooth vs choppy without it.
<script src="https://code.nath.co/src/jQuery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script> <script>SmoothScroll({ // Scrolling Core animationTime : 2000, // [ms] stepSize : 100, // [px] // Acceleration accelerationDelta : 50, // 50 accelerationMax : 3, // 3 // Keyboard Settings keyboardSupport : true, // option arrowScroll : 50, // [px] // Pulse (less tweakable) // ratio of "tail" to "acceleration" pulseAlgorithm : true, pulseScale : 4, pulseNormalize : 1, // Other touchpadSupport : false, // ignore touchpad by default fixedBackground : true, excluded : '' })</script>  

Add to Design > Custom CSS
h2 { position: relative; z-index: 9999; }  

Add to Design > Custom CSS
.header-nav-item::after { top: -10px; position: relative; }  

Site URL: https://mandarin-violin-mjw7.squarespace.com/
Dear squarespace community, 
I would like a wrapper around my background image. I want it to depend on the background image, and not the content.
Password: elise
Many thanks!
This is the code I use now: 
/**** HOMEPAGE ****/ /* Section 1 */ /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .content-wrapper {width:100%!important; background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, header#header { background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)) !important; } @media @mobile { /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .content-wrapper {width:100%!important; background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, header#header { background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171))!important; } }  

I think you can do this without the animation code.
Add the following after my code.
.header-menu-nav-item { opacity : 0; -webkit-transition-property : opacity; -o-transition-property : opacity; transition-property : opacity; visibility : initial; will-change : opacity; } .header--menu-open .header-menu-nav-item { opacity : 1; -webkit-transition-duration : 3s; -o-transition-duration : 3s; transition-duration : 3s; -webkit-transition-timing-function : ease-out; -o-transition-timing-function : ease-out; transition-timing-function : ease-out; visibility : initial; } Basically this overrides my visibility reveal code and uses an opacity change instead.
Let us know how it goes.

@Elise__
I have updated my September 16th code post again. Added a menu items reveal effect. The example from SS got the old brain juices flowing.
Let us know how it goes.

Please see Mobile Menu Flyout.
Let us know how it goes.

I have updated my September 16th code post.
You'll want to set @sweep-out to true.
Are you thinking some kind of progressive reveal effect where New Page would be seen first, then About and so on? I don't have an immediate thought on that one. If someone has that effect in their bag of tricks feel free to chime in!