Just a slight adjustment of the 'toggle' function shown in bold/red below is that the effect you require?   toggle.onclick = function() { // Animate burger icon this.classList.toggle('active'); // Check if state of overlayWrapper and assign correct css class if(overlayWrapper.classList.contains('fadeInOverlay')) { let i = mainNavLinks.length - 1; setInterval(function(){ if(i < 0) { return false; } else { mainNavLinks[i].classList.remove('fadeInUp'); mainNavLinks[i].classList.add('fadeOutDown'); copyRight.classList.remove('copyRightSlideUp'); i--; } }, 70); setTimeout(function() { overlayWrapper.classList.remove('fadeInOverlay'); overlayWrapper.classList.add('fadeOutOverlay'); copyRight.classList.remove('copyRightSlideUp'); // Remove 'fade in up' returning links to default position mainNavLinks.forEach(function (mainNavLink) { mainNavLink.classList.remove('fadeInUp'); mainNavLink.classList.remove('fadeOutDown'); }); }, 1000) } else { overlayWrapper.classList.remove('fadeOutOverlay'); overlayWrapper.classList.add('fadeInOverlay'); // Call function to animate nav links up animateNavUp(); setTimeout(function() { copyRight.classList.add('copyRightSlideUp'); }, 1000) } } // End toggle onclick function     @REELHERO wrote: it suddenly stopped working and I dont know why -  this was your orginal code     It never worked in the first instance as the code I provided only worked when a list menu item was clicked NOT when the overlay was toggled to disappear.........it should do now though with the additions as outlined above.     ... View more

sorry for all the replies - it was a toggle postioning class that was superfluous - i removed it and it centers-   By @REELHERO   That is what I suggested in my reply to you. Using position absolute takes the container out of the html workflow so the siteTitle moves into the 'vacant' space. i.e., there is effectively only 2 containers in the 'header' and using 'justify-content: space-between' set on the 'header' css does exactly that, spaces the containers to the extreme left/right. When the 3rd container is present they are spaced evenly across the width of the header, so the siteTitle will sit in the center of the left/right containers.   Negative margins are not needed in this case as IF done correctly align-items: center; which is applied to the header css  should have the effect of vertically centering all the containers in the 'header' parent container.....if that is not happening that is because you have some unecessary css going on to control the child containers and there contents.   Using a negative margin in this case would be viewed as a hack.   As for the menu disappearing it would not be a browser conflict, it would be something you have changed since it was working. ... View more

This might be a bit more useful, I would try and cut down on the amount of containers where possible as it makes trouble shooting and management a lot lot easier.     <header> <div class="socialMedia"> <a href="https://toddheymandirector.com/"><img src="https://andylilien.com/images/social/email.svg" alt=""></a> <a href="https://toddheymandirector.com/"><img src="https://andylilien.com/images/social/insta.svg" alt=""></a> <a href="https://toddheymandirector.com/"><img src="https://andylilien.com/images/social/vimeo.svg" alt=""></a> <a href="https://toddheymandirector.com/"><img src="https://andylilien.com/images/social/imdb.svg" alt=""></a> </div> <!-- end socialMedia --> <div class="siteTitle"> <h2><a href="https://andylilien.com" target="_blank" >ANDY LILIEN</a></h2> <h4><a href="https://andylilien.com" target="_blank" >DIRECTOR OF PHOTOGRAPHY</a></h4> </div> <!-- end siteTitle --> <div class="bentoIcon"> <div class="bento_box_wrapper"> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> </div> </div> <!-- end bentoIcon --> </header>     CSS for header is below: I cant style the site title as it uses special fonts which I don't have access to but you do and can easily add the styling to the <h2> and <h4> tags.      * { box-sizing: border-box; } header { display: flex; justify-content: space-between; align-items: center; background-color: rgba(255, 255, 255, 0.9); position: fixed; width: 100%; padding: 30px 50px; top: 0; z-index: 100; } .socialMedia { display: grid; grid-template-columns: repeat(2, 16px); grid-column-gap: 5px; grid-row-gap: 1px; position: relative; animation-name: slideInRight; animation-duration: 500ms; animation-delay: 500ms; animation-fill-mode: forwards; right: 100px; } .bentoIcon { position: relative; animation-name: slideInLeft; animation-duration: 500ms; animation-delay: 500ms; animation-fill-mode: forwards; left: 100px; } @keyframes slideInLeft { 100% {left:0;} } @keyframes slideInRight { 100% {right:0;} } .siteTitle h2{ font-size: 25px; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin: 0 0 7px 0; padding: 0; } .siteTitle h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin: 0; padding: 0; }       ... View more

Not sure about the css aspect, it's not really my strong point. I don't know if css can toggle anything onclick or hold it's state, probably but I don't major on css a great deal .   It's easily achieved with a bit of javascript (see code example below)   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bento Box Icon</title> <style> body { background-color: #21252b; } .bento_box_wrapper { display: grid; grid-template-columns: repeat(3, 6px); gap: 6px; width: 30px; height: 30px; } .bento_box { width: 6px; height: 6px; background-color: #a6babb; } .bento_box_transparent { background-color: transparent; } </style> </head> <body> <div class="bento_box_wrapper"> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> <div class="bento_box"></div> </div> <script> const bento_box_wrapper = document.querySelector('.bento_box_wrapper'); const bento_box = document.querySelectorAll('.bento_box'); bento_box_wrapper.onclick = function() { bento_box[1].classList.toggle('bento_box_transparent'); bento_box[3].classList.toggle('bento_box_transparent'); bento_box[5].classList.toggle('bento_box_transparent'); bento_box[7].classList.toggle('bento_box_transparent'); } </script> </body> </html>     ... View more

Created a page for a friend using intersection observer js where the divs/images should appear as you scroll down except something is stopping it from scrolling further than the visible page-   https://andylilien.com/generalreel/ but works on mine with the same script and relevant css https://toddheymandirector.com/reel/   Ive tried overflow:scroll etc nothing has worked   thoughts? By @REELHERO     Badly formatted code is causing the problem, as a result the </body> tag is unclosed. Is the editor you are using NOT showing the errors?   Marked in bold/red should not be there:   </a> </div> </div> </li> </ul> <div class="copyRight">© 2023 Andy Lilien // All Rights Reserved</div> </div> <!-- End overlayWrapper-->     There's some issue with the code between the 'header_andy" container. If you remove it the page will scroll.   <div id="header_andy"> </div>     I can't find any reason why the below code should be present? </div> <!-- End of slider --> </div>     Make the changes suggested and rebuilt the code between the 'header_andy" container. Something in that is the main culprit I think.    Plus the website is not secure, for some reason. I get a big warning in the browser not to proceed to the page. Only reason I did was because I know you.............so you need to get that fixed as soon as is possible.      ... View more