Fluid Text Centered Logo - Saas Problems

I was tumbling around with some Saas trying to create a fluid centered logo text heading. (in wordpress using the Automatic CSS addon + Bricks Builder) I created an attribute to define the :nth-child where the margin around the text logo goes based on the number of links. I have somehow managed to get the desired result in the builder, however the editor throws the following error every time I save the code... “Incompatible units em and vw.: line: 96, column: 1”. The line in question is this and I think using vw might be the issue in saas… $logo-width: clamp(1.5rem, 4vw + 1em, 2.5rem); (maybe this code is not producing the correct result anyway and is only being cached somehow) https://test-olithompson-dev.stackstaging.com/template/header-2/?bricks_preview=1728978340 I have also tried to recreate the code in codepen (See Saas commented at the bottom of css area) https://codepen.io/oli-Thompson/pen/VwobERp I am in a strange situation where I want what is displayed on the screen, however at the same time I would like to fix the error. Here is the original inspiration for my header... https://www.youtube.com/watch?v=pY3Yl7rl8yA&t=1720s (the only difference is using fluid editable text for the logo) I also found this article on functions and vw units... https://sassbreak.com/viewport-relative-headings-with-sass/#:~:text=Viewport%2Drelative%20units%20(vw%2C,based%20on%20the%20viewport%20size. (although I couldn't figure out if this is on the right track or not)

oli Thompson

CodePen

Centered Logo (Saas)

...

Kevin Geary

YouTube

How to Create a Dynamic Centered Logo Menu in Bricks (w/ SCSS)

Yes, it's good to know how to create a centered logo menu because they're somewhat of a pain in the ass. But, this was mostly an excuse for me to do a new SCSS tutorial since so many people have been asking for more SCSS on this channel. While there are a lot of centered logo menu methods, this is the one I tend to prefer. It adapts automatical...

Viewport-Relative Headings with Sass

Viewport-relative units are a new set of dynamic CSS units for sizing elements. Let's see how we can create viewport-relative headlines out of pixel units.