ahstudiolondon

Hi @tuanphan tahnk you for reviewing. I have in fact decided on a different approach. Appreciate you looking into it.

@Ziggy thank you very much for the quick reply, I really appreciate you. 🙏

You are the don @tuanphan. Thank you as always for your rapid answer, I'm forever grateful! 🙏

Try adding to Settings > Advanced > Code Injection > Footer
<div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> <style> body .cursor { pointer-events: none; } body .cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } body .cursor__ball circle { fill: #f7f8fa; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script> const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('.hoverable'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) {if (window.CP.shouldStopExecution(0)) break; $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor window.CP.exitedLoop(0);function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.pageX - 15, y: e.pageY - 15 }); TweenMax.to($smallBall, .1, { x: e.pageX - 5, y: e.pageY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 4 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); } </script>  

Change this line
const $hoverables = document.querySelectorAll('.hoverable'); to this
const $hoverables = document.querySelectorAll('a');  

@Ziggy Wow I feel like an idiot. I was trying to embed the portfolio section onto another page... thank you so much for your sage advice, I've built out my homepage as a portfolio page and it's working perfectly! Thank you.

@MattDerrickAH You can add this code snippet within the Custom CSS panel:
.header-menu-nav-item-content { background-image: none !important; }

Having played around adding this code above your code seems to have done the trick. I fully suspect this is not best practice, but seemed to work...

Add to Design > Custom CSS
/* Burger -logo - cart */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* customize menu */ nav.header-menu-nav-list { width: 50%; } .header-menu-bg.theme-bg--primary { width: 50%; } .header-menu-nav-folder[data-folder="root"] { overflow: hidden; } body:not(.header--menu-open) .header-menu { left: -200%; transition: all 0.3s; } .header--menu-open .header-menu { left: 0; transition: all 0.3s; } }  

Hi. Sorry. Missing your notification. IT looks like you solved?
Add to Home > Design > Custom CSS
header#header { background: white !important; }  

Add to Home > Design > Custom CSS
.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper { background: transparent; }  

Add to Design > Custom CSS
input, textarea, input::placeholder, textarea::placeholder { color: #00282e !important; font-family: 'Circular-Book' !important; }