robfeltrin

Hi there! I've used some coding to achieve a list layout, but am having trouble positioning the thumbnail where I need it to be without it changing position vertically when the screen changes size. https://violin-halibut-2csa.squarespace.com/list Anyone able to help with a code to make it stay in place, below the growing line when hovered? Thank you This is the code I'm playing around with no success: //**PROJECT SUMMARY LIST IMAGE APPEAR ON HOVER**/ #block-yui_3_17_2_1_1697462333736_27194 .summary-item:hover img { opacity: 1!important; transition: opacity 0.4s ease-in-out,!important; visibility: visible!important; pointer-events: none!important; } #block-yui_3_17_2_1_1697462333736_27194 .summary-item img { opacity: 0!important; visibility: hidden; transition: opacity 0.4s ease-in-out,!important; border: 1px solid #191918; pointer-events: none!important; } #block-yui_3_17_2_1_1697462333736_27194.summary-thumbnail img { visibility: hidden!important; pointer-events: none!important; } #block-yui_3_17_2_1_1697462333736_27194.summary-thumbnail:hover img { visibility: hidden!important; pointer-events: none!important; } /******IMAGE POSITIONING******/ /* Excerpt styles */ #block-yui_3_17_2_1_1697462333736_27194 .summary-excerpt { position: relative; } #block-yui_3_17_2_1_1697462333736_27194 .summary-excerpt p { font-size: 0.8rem !important; } #block-yui_3_17_2_1_1697462333736_27194 .summary-item { display: flex!important; align-items: center; /* This aligns children (like your image and title) vertically in the middle */ } .summary-thumbnail-container { position: absolute; /* Or you can remove this if it's not absolutely positioned within .summary-item */ left: 20px!important; top: 195px; }

Hi tuanphan, thanks for your reply. I ended up purchasing a plugin for that, but would rather use CSS only if that's achievable? Also, can you add SEO to each image on the grids? I've built the pages with individual images and quite like that we can add SEO to them individually...

Did you get anywhere with this? I'm using blog posts to organise an architecture website because the portfolio option wasn't versatile enough and am facing the same frustration - having to organise the layout with individual images

Hmm not sure what happened there. Here's a comparison of the original image and the one on the website. It is an image block in a blog post. I removed all possible settings that I could see in the colour editing section... Not sure what else could be causing this, but it's on every image..

Hi there! Trying to figure out why the images appear to have a layer of red/pink colour on top of them. Password: mmmarchitects https://violin-halibut-2csa.squarespace.com/all-projects/east-sussex-170 I've tweaked the colours on every setting to try and figure out what was causing that but nothing seems to do the trick. I couldn't find anything on my CSS list either - I deleted everything to see if it would change... Please help 😞

Hi, yes, by the time you looked at it I had probably moved on from that code. It can definitely be done if your mobile menu doesn't have a fly-out like mine does.

I managed to achieve something similar with this: /* Mobile menu overlay with blurred background */ .header--menu-open::before, { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent!important; backdrop-filter: blur(10px); z-index: 998; } I need it to fly in and out of the screen with my menu, though, and can't seem to find a way to make this work. Anyone? https://violin-halibut-2csa.squarespace.com/ mmmarchitects

Hello! I'm having some trouble with the overlay background of my mobile menu. I need to apply a blurred background to it that matches the blur I've put on the header, but nothing I have tried so far has done the trick. There's a fly-out menu coded in, and some of the things I tried have applied a background that doesn't move with the fly-out. The area might have been changed to make everything stay in place... Not sure. Any help would be much appreciated 🙂 https://violin-halibut-2csa.squarespace.com/ mmmarchitects Code being used: /***FORCE MOBILE MENU***/ .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;} /***END FORCE MOBILE MENU***/ /***ADD BLUR TO HEADER***/ #header { position: fixed; top: 0; left: 0; width: auto!important; height: auto!important; backdrop-filter: blur(10px); z-index: 999;} /***END ADD BLUR TO HEADER***/ /***HEADER BORDERS***/ /* Common Styles for both Mobile and Desktop */ .header-announcement-bar-wrapper::before, .header-announcement-bar-wrapper::after { content: ''; position: absolute; height: 1px; background-color: #221313; } .header-announcement-bar-wrapper::before { top: 0; } .header-announcement-bar-wrapper::after { bottom: 0; } /* Mobile Styles */ @media only screen and (max-width: 767px) { .header-announcement-bar-wrapper::before, .header-announcement-bar-wrapper::after { left: 6vw!important; right: 5.7vw!important; } } /* Desktop Styles */ @media only screen and (min-width: 768px) { .header-announcement-bar-wrapper::before, .header-announcement-bar-wrapper::after { left: 3vw!important; margin-right: 3vw!important; right: 0!important; /* Adjust if needed */ } } /***END HEADER BORDERS***/ /***HEADER MENU DESKTOP VIEW***/ @media only screen and (min-width: 768px) { #header { background-color: transparent!important; position: fixed!important; top: 2vh; left: 0; width: 100%; z-index: 1000; } } .header-title-logo a { margin-left: 1.4vw!important; } body.header--menu-open { overflow: auto!important; } .header-menu--folder-list { position: fixed!important; top: -96.3%!important; left: 55vw; width: 46vw; z-index: 1000; } .header--menu-open .header-menu--folder-list { left: 39.8vw; background-color: transparent!important; } /*Edit menu box items sizing*/ @media only screen and (min-width: 768px) { .header-menu-nav-item { position: relative; width: 12vw; box-sizing: border-box; padding-left: 0vw; padding-right: 0vw; } .header-menu-nav-item a { position: relative; display: flex; align-items: !important; justify-content: flex-end; margin: 0vw; font-size: 1.2rem!important; text-decoration: none; } .header-menu-nav-item:nth-child(2) a { justify-content: flex-end; margin-right: 5%; } .header-menu-nav-wrapper { display: flex; width: 100%; justify-content: flex-end; } .header-menu-nav-list { margin-left: auto; } .header-menu-nav-folder { position: absolute; display: flex; top: 0; left: 0; width: 100%; min-height: 100%; max-height: 100%; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; transform: translateX(100%); transition: left 1s ease-in-out; -webkit-overflow-scrolling: touch; flex-direction: column; background: transparent!important; } } /***END HEADER MENU DESKTOP VIEW***/ /***HEADER MENU MOBILE VIEW***/ @media only screen and (max-width: 768px) { #header { background-color: transparent!important; position: fixed!important; margin-top: 2.5vh!important; top: 0; left: 0; width: 100%; z-index: 1000; } .header-title-logo a { margin-left: 3vw!important; } @media only screen and (max-width: 767px) { body.header--menu-open { overflow: hidden!important; }}} /*.header--menu-open .header-menu--folder-list { left: 39.8vw; background-color: RED!important; }}*/ /***MOBILE MENU AS ORIGINALLY SET BY SQUARESPACE***/ /* Reset styles for Smaller Screens (max-width: 767px) */ @media only screen and (max-width: 767px) { .header-menu--folder-list { position: fixed; top: 0!important; left: 0%!important; width: 100%!important; height: 100%!important; background-color: transparent!important; z-index: auto; transition: top 0.5s ease-out; } /* Add top border only to the first list item */ .header-menu--folder-list .header-menu-nav-item:first-child:before { content: ""; position: absolute; top: -48%; left: 6vw; right: 5.7vw; height: 1px; background-color: #221313; } .header-menu--folder-list .header-menu-nav-item:after { content: ""; position: absolute; bottom: -45%; left: 6vw; right: 5.7vw; height: 1px; background-color: #221313; } /* Reset menu open state */ .header--menu-open .header-menu--folder-list { top: 0!important; left: auto; } /* Reset menu item styles */ .header-menu-nav-item { top: 25vh; position: relative; width: auto; box-sizing: content-box; padding-left: 0; padding-right: 0; } .header-menu-nav-item a { position: relative; display: block; align-items: normal; justify-content: normal; text-decoration: none; font-size: 2rem!important; margin-top: 30px; margin-right: 8vw; border-bottom: 1px ; } /* Reset menu wrapper styles */ .header-menu-nav-wrapper { width: 100%!important; height: 0!important; text-align: right; justify-content:center!important; } .header-menu-nav-list { margin-left: 0; } .header-menu-nav-folder { position: relative; display: block; top: auto; left: auto; width: auto; min-height: auto; max-height: auto; overflow-y: visible; overflow-x: visible; transform: none; transition: none; } } .site-wrapper .header-menu .header-menu-bg { background-color: transparent!important; } @media only screen and (max-width: 767px) { body.header--menu-open { overflow: hidden!important; background-color: transparent !important; }} /****MENU FLY-OUT****/ @direction : right; // use left or right @duration-open : 0.6s; /* should the menu close with the same effect or blink; it's gone? use false or true */ @close-effect : true; // make close effect a little shorter than open @close-duration-shorten-by : 0.2s; // set value to suit your needs /* reveal menu item by itself shows no visible effect. you have to use either a built-in reveal menu item effect or write a custom CSS effect */ @reveal-menu-items : false; // begin ignored if @reveal-menu-items : false @reveal-menu-items-delay-step : 0.03s; @reveal-menu-items-effect-flyout : true; // end ignored if @reveal-menu-items : false // do not change anything below, there be the borg here // begin unset SS built-in menu effect @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .header-menu { opacity : unset; .transition-unset ( ); visibility : unset; } } .header--menu-open .header-menu .header-menu-cta, .header-menu-actions, .header-menu-cta, .header-menu-nav-item a, .header-menu-nav-list, .header-menu, { opacity : unset; .transform-unset ( ); .transition-unset ( ); visibility : unset; will-change : unset; } /* end unset SS built-in menu effect */ // begin move menu elements off screen .header-menu { -webkit-transition-property : -webkit-transform; transition-property : -webkit-transform; -o-transition-property : transform; transition-property : transform; transition-property : transform, -webkit-transform; will-change : transform; .close-effect ( @duration-open, @close-duration-shorten-by ); .header-menu-direction-off ( ); } .header-menu-nav-folder { .header-menu-nav-folder-direction-off ( ); } .header-menu-actions, .header-menu-cta { .transition-delay ( @duration-open ); } .header-menu-actions { .header-menu-actions-off ( ); } .header-menu-cta { .header-menu-cta-off ( ); } // end move menu elements off screen // begin move menu elements on screen .header--menu-open .header-menu { @d : @duration-open; @e : ease-out; .transition-duration ( @d ); .transition-timing-function ( @e ); .transform-unset ( ); } .header-menu-nav-folder--active { .transform-unset ( ); } .header--menu-open .header-menu .header-menu-actions { @d : @duration-open; @e : ease-out; .transform-unset ( ); .transition-delay ( 0.5s ); .transition-duration ( @d ); .transition-timing-function ( @e ); } .header--menu-open .header-menu .header-menu-cta { @delay : round( 0.5s + 0.03s, 3 ); @duration : @duration-open; @e : ease-out; .transform-unset ( ); .transition-delay ( @delay ); .transition-duration ( @duration ); .transition-timing-function ( @e ); } // end move menu elements on screen // begin direction .header-menu-direction-off ( ) when ( @direction = left ) { .transform-translate-x ( -100% ); } .header-menu-direction-off ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } .header-menu-nav-folder-direction-off ( ) when ( @direction = left ) { .transform-translate-x ( 200% ); } .header-menu-nav-folder-direction-off ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } .header-menu-nav-item-direction ( ) when ( @direction = left ) { .transform-translate-x ( -100% ); } .header-menu-nav-item-direction ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } .header-menu-actions-off ( ) when ( @direction = left ) { .transform-translate-x ( -100% ); } .header-menu-actions-off ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } .header-menu-cta-off ( ) when ( @direction = left ) { .transform-translate-x ( -100% ); } .header-menu-cta-off ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } // end direction // close menu effect, optional .close-effect ( @duration, @offset ) when ( @close-effect = true ) { @d : round( @duration - @offset, 3 ); @e : ease-in; .transition-duration ( @d ); .transition-timing-function ( @e ); } .reveal-menu-items ( @duration-open, @reveal-menu-items-delay-step ); // reveal menu items .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) { .reveal-menu-items-effect-flyout ( @duration-open ); // reveal menu items effect flyout .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) { .header-menu-nav-item { .transition-duration ( @duration ); .header-menu-nav-item-direction ( ); } .header--menu-open .header-menu-nav-item { .transform-unset ( ); } } @iterations : 32; .transition-delays ( @i ) when ( @i > 0 ) { .header-menu-nav-item:nth-child( @{i} ) { @d : round( @i * @step + ( @start / 2 ), 3 ); .transition-delay ( @d ); } .transition-delays ( @i - 1 ); } .transition-delays ( @iterations ); } // begin mixin utilities .transform-translate-x ( @value ) { -webkit-transform : translateX( @value ); -ms-transform : translateX( @value ); transform : translateX( @value ); } .transform-unset ( ) { -webkit-transform : unset; -ms-transform : unset; transform : unset; } .transition-delay ( @delay ) { -webkit-transition-delay : @delay; -o-transition-delay : @delay; transition-delay : @delay; } .transition-duration ( @duration ) { -webkit-transition-duration : @duration; -o-transition-duration : @duration; transition-duration : @duration; } .transition-timing-function ( @easing-function ) { @e : @easing-function; -webkit-transition-timing-function : @e; -o-transition-timing-function : @e; transition-timing-function : @e; } .transition-unset ( ) { -webkit-transition : unset; -o-transition : unset; transition : unset; } // end mixin utilities // end mobile menu left fly OUT//

I'm almost there! I just need to make it so that the menu is completely hidden when closed. Any idea what I can try?

Hi Tuanphan, thank you for your reply! I had achieved this with some code injection and CSS but it has stopped working for some reason: <script> document.addEventListener("DOMContentLoaded", function () { var targetElement = document.querySelector(".block-yui_3_17_2_1_1699612047731_7222"); var initialWidth = 0; window.addEventListener("scroll", function () { var distanceFromTop = targetElement.getBoundingClientRect().top; if (distanceFromTop < window.innerHeight && initialWidth < 100) { initialWidth += 1; // You can adjust the increment value targetElement.style.width = initialWidth + "%"; } }); }); </script> CSS /**KPG LINE**/ #block-yui_3_17_2_1_1699612047731_7222 { width: 0%; margin-left: 0; /* Initial margin */} Any idea what is going wrong? Thanks

/* Move the overlay menu higher on the screen and to the left */ .header-menu-nav-list { bottom: 45.5%; /* Adjust this value to your preference */ } /* Custom CSS for Mobile Menu on Desktop */ @media only screen and (min-width: 768px) { /* Adjust the min-width value according to your needs */ .header-menu-nav-wrapper { display: flex; align-items: center; justify-content: space-between; width: 67vw; } } /* Remove space between menu items */ .header-menu-nav-item { margin-bottom: 0 !important; /* Remove any bottom margin */ } /* Reduce space between menu items */ .header-menu-nav-item { align: right; margin-right: -75% !important; margin-left: 60%/* Adjust the right margin as needed */ } /* Remove margin from the last item to prevent extra space */ .header-menu-nav-item:last-child { margin-right: -40%!important; } /* Move the overlay menu higher on the screen */ /*.header-menu-nav-list { bottom: 45.5%;} /* Adjust this value to your preference */ /* Reduce the height of the menu items */ /* Keep the menu items at the same height as the site title */ .header-menu-nav-wrapper { position: fixed; top: 41%; /* Adjust this value to center the menu vertically */ transform: translateY(-50%); } @direction : right; // use left or right @duration-open : 0.6s; /* should the menu close with the same effect or blink; it's gone? use false or true */ @close-effect : true; // make close effect a little shorter than open @close-duration-shorten-by : 0.2s; // set value to suit your needs /* reveal menu item by itself shows no visible effect. you have to use either a built-in reveal menu item effect or write a custom CSS effect */ @reveal-menu-items : false; // begin ignored if @reveal-menu-items : false @reveal-menu-items-delay-step : 0.03s; @reveal-menu-items-effect-flyout : true; // end ignored if @reveal-menu-items : false // do not change anything below, there be the borg here // begin unset SS built-in menu effect @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .header-menu { opacity : unset; .transition-unset ( ); visibility : unset; } } .header--menu-open .header-menu .header-menu-cta, .header-menu-actions, .header-menu-cta, .header-menu-nav-item a, .header-menu-nav-list, .header-menu, { opacity : unset; .transform-unset ( ); .transition-unset ( ); visibility : unset; will-change : unset; } /* end unset SS built-in menu effect */ // begin move menu elements off screen .header-menu { -webkit-transition-property : -webkit-transform; transition-property : -webkit-transform; -o-transition-property : transform; transition-property : transform; transition-property : transform, -webkit-transform; will-change : transform; .close-effect ( @duration-open, @close-duration-shorten-by ); .header-menu-direction-off ( ); } .header-menu-nav-folder { .header-menu-nav-folder-direction-off ( ); } .header-menu-actions, .header-menu-cta { .transition-delay ( @duration-open ); } .header-menu-actions { .header-menu-actions-off ( ); } .header-menu-cta { .header-menu-cta-off ( ); } // end move menu elements off screen // begin move menu elements on screen .header--menu-open .header-menu { @d : @duration-open; @e : ease-out; .transition-duration ( @d ); .transition-timing-function ( @e ); .transform-unset ( ); } .header-menu-nav-folder--active { .transform-unset ( ); } .header--menu-open .header-menu .header-menu-actions { @d : @duration-open; @e : ease-out; .transform-unset ( ); .transition-delay ( 0.5s ); .transition-duration ( @d ); .transition-timing-function ( @e ); } .header--menu-open .header-menu .header-menu-cta { @delay : round( 0.5s + 0.03s, 3 ); @duration : @duration-open; @e : ease-out; .transform-unset ( ); .transition-delay ( @delay ); .transition-duration ( @duration ); .transition-timing-function ( @e ); } // end move menu elements on screen // begin direction .header-menu-direction-off ( ) when ( @direction = left ) { .transform-translate-x ( -100% ); } .header-menu-direction-off ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } .header-menu-nav-folder-direction-off ( ) when ( @direction = left ) { .transform-translate-x ( 200% ); } .header-menu-nav-folder-direction-off ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } .header-menu-nav-item-direction ( ) when ( @direction = left ) { .transform-translate-x ( -100% ); } .header-menu-nav-item-direction ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } .header-menu-actions-off ( ) when ( @direction = left ) { .transform-translate-x ( -100% ); } .header-menu-actions-off ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } .header-menu-cta-off ( ) when ( @direction = left ) { .transform-translate-x ( -100% ); } .header-menu-cta-off ( ) when ( @direction = right ) { .transform-translate-x ( 100% ); } // end direction // close menu effect, optional .close-effect ( @duration, @offset ) when ( @close-effect = true ) { @d : round( @duration - @offset, 3 ); @e : ease-in; .transition-duration ( @d ); .transition-timing-function ( @e ); } .reveal-menu-items ( @duration-open, @reveal-menu-items-delay-step ); // reveal menu items .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) { .reveal-menu-items-effect-flyout ( @duration-open ); // reveal menu items effect flyout .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) { .header-menu-nav-item { .transition-duration ( @duration ); .header-menu-nav-item-direction ( ); } .header--menu-open .header-menu-nav-item { .transform-unset ( ); } } @iterations : 32; .transition-delays ( @i ) when ( @i > 0 ) { .header-menu-nav-item:nth-child( @{i} ) { @d : round( @i * @step + ( @start / 2 ), 3 ); .transition-delay ( @d ); } .transition-delays ( @i - 1 ); } .transition-delays ( @iterations ); } // begin mixin utilities .transform-translate-x ( @value ) { -webkit-transform : translateX( @value ); -ms-transform : translateX( @value ); transform : translateX( @value ); } .transform-unset ( ) { -webkit-transform : unset; -ms-transform : unset; transform : unset; } .transition-delay ( @delay ) { -webkit-transition-delay : @delay; -o-transition-delay : @delay; transition-delay : @delay; } .transition-duration ( @duration ) { -webkit-transition-duration : @duration; -o-transition-duration : @duration; transition-duration : @duration; } .transition-timing-function ( @easing-function ) { @e : @easing-function; -webkit-transition-timing-function : @e; -o-transition-timing-function : @e; transition-timing-function : @e; } .transition-unset ( ) { -webkit-transition : unset; -o-transition : unset; transition : unset; } // end mixin utilities // end mobile menu left flyout I'm now here with it, everything is in place, but the area where you click on the links is set too low and I cant seem to move it up to place. Any idea what I can do? I also need to be able to click on the main page behind the menu while it's open. Not sure what to do anymore... https://violin-halibut-2csa.squarespace.com/ mmmarchitects

I have used this and it works great! The only thing is: I'm trying to make the menu items to appear side-by-side in a row instead of a column, and to fly out from behind the burger icon (which I have replaced for the word Menu - would be great if I could have both Menu and the burger icon side by side at the same time...) https://violin-halibut-2csa.squarespace.com/ mmmarchitects Any way I can achieve this? I have tried everything but nothing works

Any luck on this?

Worked like a charm! Thank you!

https://avernahomes.com.au/ Hello! I would like to replicate the animation these guys have under their images on the homepage where the line grows from left to right. Any idea if that is possible? https://violin-halibut-2csa.squarespace.com/ mmmarchitects Thanks!

Hello! I've used this code to replace the burger menu with text, but I would like the text to change colour on hover. I've tried a few different things but can't seem to figure it out. Current code: // Mobile Menu Text // .burger-box:after { content: "Menu ="; text-align: right; font-size: 16px; color: #000; display: block !important; } .burger-box { width: 60px !important; height: 25px !important; } .burger-box div { display: none; } Any idea how to add hover effect to the text? https://violin-halibut-2csa.squarespace.com/ mmmarchitects Thanks!

Any luck on this?

Oh I've removed it now, sorry. Would have to find another one if I can manage to have them pop up horizontally on the header...

Hiya! I've got the mobile menu forced on desktop. I would like to have the links to slide into the screen from the right, next to the hamburger icon, where the header is. It would essentially be a header with a burger that when you click, it slides the links in. I've managed to make it slide (code now removed) but cannot seem to find a way to organize the links horizontally one next to the other at the top of the page. Anyone with a CSS solution? https://www.towergateinsurance.co.uk/home-and-property/unoccupied-property-insurance mmmarchitects Thanks

Hey. No, I mean the logo title on the homepage

Hello! My homepage has 6 sections. 5 of them are for our most recent/featured projects and one of them is a snippet of our 'about' page. Is there any way for me to have these 5 sections to be linked to the 'featured' posts (there's a toggle selection when you post...)? Basically, I would like for the sections to mirror the featured blog post's featured image and post title, exacly as it is when you open the project, with the title being a link to the project itself. These guys have that here: https://www.michaelisboyd.com/ https://violin-halibut-2csa.squarespace.com/ Password: mmmarchitects Thank youu

Hello! Me again 🤪 I'm trying to solve a problem with our company logo. The logo is "MMM architects" with two different fonts and I would like to add it to our homepage either on the header in the corner with architects on a second line below MMM, or to have it as a text block. The text needs to change colour on hover as that's part of the whole site identity now... I've managed to add a second line of text below the site title, but I need the words to remain in proportion when the screen changes size - any way that can be achieved? Another solution would be to have it in a text block and using the 'scale text' to solve the proportions issue. I've managed to have a different font within the same text block with: h4 strong em {font-family: calibri; font-style: initial; } This works great, but when you add a link to the text and it is in two separate lines, when you hover over it, it doesn't recognise it as one element and only changes the colour of the element you're hovering over (if it is all one line it changes the colour of the entire block). I would love it if someone could help out with a solution for both. Am I able to add an animated logo somehow? Like the one on these guys website: https://www.michaelisboyd.com/ Long one, sorry 😅 https://violin-halibut-2csa.squarespace.com/ Password: mmmarchitects Two text blocks on the homepage as reference... if it helps

That does the same thing... a#site-title:after { content: "architects"; display: block; font-family: calibri; font-size: 3rem; } The MMM becomes bigger with larger screens, and the architects resizes too but they dont resize the same...

Hi Ziggy, thanks for the reply. We've decided to ditch the icons, so won't need to worry about this one anymore.

Hiya! I'm trying to add a bit of text next to an icon I have added into a code block. I would like the user to click the icons to open up a list view or map view, but for the text to appear on hover only. So far I can add 'Map View' into the code together with the world icon, but can't manage to make the text to appear on hover only... The 'List View' button can be modified to appear on hover, but the user won't be clicking the icon... Anyone? https://violin-halibut-2csa.squarespace.com/projects mmmarchitects