Active-page-link does not as expected

I Need Help
21

Well, it’s actually not that difficult to accomplish. You can retain the menu navigation bloc in the global header and simply move the OFFCANVAS row into a new block positioned below the blue line in the dynamic area. You can create a new bloc, set the padding to 0, and place it there. Subsequently, duplicate this bloc for all pages you wish to style and apply the desired styling.

What kind of bloc do I “create”:

Bildschirmfoto 2024-11-28 um 18.34.18
Bildschirmfoto 2024-11-28 um 18.34.181920×907 82.3 KB

Just one with a “structure”? or with a structure with one column?

Thanks in advance
Kind Regards
Uwe

22

You can use the first Structure 1 Column bloc just fine.

23

I will try - just to not give up on this and for my future projects - is there an offcanvas/dropdown/fullscreen menu which supports that active state issue I have?
Because I would not have any issues with “simply” create another menu outside from Minimalist Library.

And also, if I simply have any buttons with that active state set to it, will this be supported by its pages?

Thanks anyway - also thanks for support on my master class and thx for blocs 6

Kind Regards
Uwe

24

Minimalist Library or not, it will be exactly the same. If the menu uses the navbar bric, you can use the built-in active link styling option. If not, it’s a different story.

I am not sure I am following, but well, I didn’t sleep well for almost a week :joy: The active state is mostly used when users are pressing the button.

25

I am not sure I am following, but well, I didn’t sleep well for almost a week :joy: The active state is mostly used when users are pressing the button.

I can clearly understand this (lack of sleep) and also this (pressing the button) might be the misunderstanding on my side.

Coming from Muse (Adobe) we had normal-hover-active-click states. You now also have focus as a state.
Is the one I am searching for focus state?

I never got the idea of a click state since mobile was the big thing.
Same with : visited - I might be interested in watching pages more than once and then the visited state would not make much sense.

Thanks and Kind Regards
Uwe

26

Blocs adds an attribute called data-active-page that has a value of the class you assigned for active links. It then takes that value and assigns it as a class on a nav item.

This attribute exists on non-nav items also, it just doesnt apply the class. There are several ways of addressing this.

  1. Using CSS selectors… unfortunate Blocs doesnt allow us to do this without the code editor. a[data-active-page] So you would have to hand code the CSS.
  2. Using Javascript, to grab any link with that attribute, and adding the class. (I posted some code below for this)
  3. Use Offcanvas Helper, which already picks up active links and you could style this in the class editor. Brics give you options.

Copy and paste one of these into your project footer input zone of the code editor, and it will add the active class to the link.

Click to show the code.

Entire Page 
<script>
document.addEventListener("DOMContentLoaded", () => {
    const anchors = document.querySelectorAll('a[data-active-page]');
    anchors.forEach(anchor => {
        const activePageClass = anchor.getAttribute('data-active-page');
        if (activePageClass && !anchor.classList.contains(activePageClass)) {
            anchor.classList.add(activePageClass);
        }
    });
});
</script>
Just the Offcanvas 
<script>
document.addEventListener("DOMContentLoaded", () => {
    const offcanvasMenu = document.querySelector('.offcanvas');
    if (offcanvasMenu) {
        const anchors = offcanvasMenu.querySelectorAll('a[data-active-page]');
        anchors.forEach(anchor => {
            const activePageClass = anchor.getAttribute('data-active-page');
            if (activePageClass && !anchor.classList.contains(activePageClass)) {
                anchor.classList.add(activePageClass);
            }
        });
    }
});
</script>

Much easier than moving a global menu out of a global area.