Navi link button centered when in current state?

hello and thanks,

Its just for mobile view.
I am working on digital menu for restaurants. Problem is aligning buttons in sections on scroll menu to be visible when selected or when on section.
Please help.


Here is my public share link: [LINK]
(how to access public share link)

1 Like

Hey @Boris_Lukic, are you trying to center each element in the horiztonal menu based on the current section automatically? If yes, I don’t think you can achieve this with native Webflow functionality. I assume, you would need some custom javascript for this. I’m happy to be corrected, if someone knows any better.

What’s your goal here? Would you like your users to be able to know where they are on the page? Let me know and I might be able to help you further.

Hey Choreus, basically i want my class when in current station to be on the center of my navigation, or just in scroll section that is visible.

I got help from my brother with JS code

Thanks and if anybody have this problem up is solution.

Julian, thanks again.

1 Like

Ok, i dont know how to copy custom code. :frowning:

It’s good to hear you found a solution.

Ok, i dont know how to copy custom code. :frowning:

What exactly do you mean? Do have trouble pasting the code on here?

Yes. :smiley: i dont know how to post code here.

No worries. I have recorded a short video showing you how to do it.

Sorry, its been years.

<script>
 var observer = new MutationObserver(function (mutationList) {
    for (const mutation of mutationList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class' && mutation.target.classList.contains('w--current')) {
            mutation.target.scrollIntoView();
        }
    }
});

document.querySelectorAll('.m-navigacija-linkovi .m-navigacija-link').forEach(function(element) {
    observer.observe(element, {attributes: true});
});
</script>



<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var closeButtonSelector = '.w-lightbox-control.w-lightbox-close';

        document.querySelectorAll('.w-lightbox').forEach(function (element) {
            element.addEventListener('click', function() {
                window.history.pushState({isLightbox: true}, null, window.location.pathname);
            });
        });

        var popstate = false;
        document.addEventListener('click', function(event) {
            if (!event.target.matches(closeButtonSelector)) {
                return;
            }

            if (popstate) {
                return;
            }

            window.history.back();
        });

        window.addEventListener('popstate', function(event) {
            if (event.state && event.state.isLightbox !== true) {
                return;
            }

            popstate = true;
            document.querySelector(closeButtonSelector).click();
            popstate = false;
        }, false);
    }, false);
</script>