Lay Theme Forum

Hi there,

I have a question about variable font support in Lay Theme.
I’m using the Recursive Variable Font (.ttf), which includes several axes — for example wght, slnt, CASL, and MONO.

In the Text Format editor, all axes are listed, but only the wght axis (Weight) actually has any visible effect. Adjusting the other axes (like CASL or MONO) doesn’t change the text appearance.

My questions:
• Does Lay Theme currently support only the wght axis, or should it be possible to control all variable font axes?
• If only wght works, is there a way to enable full font-variation-settings support via custom CSS or a future update?
• Would it make a difference if I used a .woff2 version of the font instead of .ttf?

I’d love to use Recursive’s full potential — especially the Casualness and Monospacing features.
Thanks a lot in advance for any insights!

Best, Juli

Thank you Richard.
I finally got it to work. I basically had to learn the beginner html CSS and JS to get it working.
Here is the code i used in the end. Its basically the same as you and @hx used. I just added some notes and Debug lines that helped me understanding the code. I hope its easier for the next one and that you integrate this feature in an Update?

<script>// Make sure every ROW on your Page in which you want to have a menu point has an CLASS called "menu-section" and an ID corresponding to the link in the menu.
jQuery(function ($) {
    $(window).scroll(function () {
        $('nav.primary a').addClass('menu-active') //"nav a" only works if you dont have a phone layout. Better to use "nav.primary a"
        var scrollPos = $(window).scrollTop(); //current scroll position from top of document
        //console.log("START");
        //console.log("SP" + scrollPos);
        $('.menu-section').each(function (i) { //".menu-section" links to the class you gave the Item on your page.
            //console.log( index + ": " + $( this ).text() );
            var topPosi = $(this).offset().top; //topPos is the number of pixels from the top of the closest relatively positioned parent element.
            //console.log ($(this));
            //console.log("TP" + topPosi);
            //console.log("INTERMEDIATE");
                if ((topPosi - scrollPos) <= 500) { //The Number is a Treshold for the Position at which the Menu Point switches.
                    $('.menu-active').removeClass('menu-active');
                    $('nav.primary a').eq(i).addClass('menu-active');
                    //console.log("END_if_true");
                }

})
});
});
</script>

And the corresponding CSS:

.primary .menu-active {
    color: white;  
}

@Richard-K
Hello Richard! Thanks a lot for your answer!
Right now i dont have any custom code applied. However i tried the following code from @hx but deleted it again, since it didn't worked on my site. :
<script>
jQuery(function ($) {
$('nav a').addClass('menu-active')
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
$('.menu-section').each(function (i) {
var topPos = $(this).offset().top;
if ((topPos - scrollPos) <= 80) {
$('.menu-active').removeClass('menu-active')
$('nav a').eq(i).addClass('menu-active')
}
})
});
});
</script>

and this custom css:

nav a.menu-active {
color: red;
}

It just turned my whole menu red.
I know the example page is not made with laytheme. i just wanted to show the behavior i want to achieve.
I was hoping you could either help me to make the code from @hx work or point me in a direction how to achieve it on my own.
Thanks a lot!

Anyone? Please 🙏

@fifi here is an example of what i am trying to achive: https://lexic-on.ru/

Re: Activate Menu Items by Scrolling / Anchorscroll

Hello to all of you! I really enjoy LayTheme so far. Great work!
Right now i am trying to fix a Menu navigation Issue on my Onepage website.

SITUATION:
I sucessfully gave specific rows of my website an ID and linked this ID in the Fixed Menue on the left. This works very nice.

PROBLEM:
I would like to:

1. Highlight the Active Menu Point.
2. Highlight it automaticcaly by scrolling to it.

Right now only the "MENU POINT MOUSE OVER" is working but the "MENU POINT ACTIVE" is not.
I tryed the Script in the Link above but i have absolutely no clue about coding so i just copyd it and its not working.
I bet its an easy solution but i dont know how.

Any help is appreciated! Thank you in advance!

LINK TO WEBSITE: https://felixahn.de/