So I setup the “active-page-link” in project settings as mentioned in the tutorial. I can only get the hover effetcs but not the states on the currewnt pages itself.
What am I missing? I can make it work on only one page or on all pages at the same time but not on the active page only.
Website: https://peopleforafrica.de
Screenshot shows, what I want to achieve as soon as I am on “WARUM GAMBIA”
Thanks in advance and Kind regards
Uwe
Hi Eldar, is this something where I also have to delete some class because from the origin “minimalist library” there was a “mini-nav” class kind of attached?
Thanks in advance and Kind Regards
Uwe
There might be conflicting classes. I’ve not used the minimalist library so I can’t say how that menu is setup. I would recommend @ Eldar on here for him to get a notification otherwise it’ll just be down to luck of him checking this post.
How can I get rid of conflicting classes? Class Manager and delete? Is it recommended to check, which classes are not used in the current project and delete/remove them?
Thanks in advance and Kind Regards
Uwe
I wouldn’t get rid of any classes until you understand what they are being used for. They will be there for a reason.
Yes, I understand this - I added that class from my Original Post: active-page-link
Before there was a class called: mini-active (which still exists)
But as I do not get on how to implement it to do what I want to show - the active state on its pages, I just thought of, to delete the active-page-link?
Thanks in advance and Kind Regards
Uwe
I deleted as mentioned the active-page-link and therefor used the mini-active class
as to be seen on my screenshot:
… but still there’s no active state shown on my pages.
If I try then, to set this class to its buttons I have of course all buttons as active (mini-active). What am I missing here? Of course I am doing something wrong but from tutorials , I cannot see what.
(I set the mini active to both yellow buttons)
Thanks in advance and Kind Regards
Uwe
Next obvious step, which I also tried first btw, before asking the forum: Use the class by default: mini-sidebar-link
and set this mini-sidebar-link for its active state as intended - but no - also this does not what’s expected.
I can feel that I am only just e few clicks away from my goal - but it seems to be complicatedbecause even all correspondin g questions to my topic are not solved yet?
Thanks in advance and
Kind Regards
Uwe
Try and recreate the active-page-link class again and then in the project settings add it to the active link class field, replacing mini-active. When you create the active-page-link class. Make sure the colour is not yellow, add red or something which will be different from the yellow hover colour.
Can you also provide a screenshot of the layer tree for how the nav is created.
Hi @Uwe,
Please use the @Eldar tag next time, or better send me and email and I will quickly sort any issues you might have.
I can’t say for sure without taking a look at the project file, but most probably the menu item link is overriding the active link class. There are a few methods to solve this. You can change the class a bit, or you can use the technique I showed in this tutorial:
In any case, if you send me the project file, I will be 100% sure what will work for you.
Cheers,
Eldar
As in one of my previous posts, how do I send my file to you directly?
And my “menu-item” class has nothing set for the active state - I set it up only because I was not able to use the default classes for border- and coloursettings
I’ll check the video and in case I send you the file to clear things up.
I have one more question later, regarding the padding between “DATENSCHUTZ” and “KONTAKT” which is strange on mobile but for this you may need the file anyway.
Thanks for getting back
Kind Regards
Uwe
Sounds good!
To send files, check the contact info here:
Hi Eldar,
My file is on its way via wetransfer with the corresponding link to this thread.
I must admit, that it is not 100% clear on what to do, after watching the video.
Do I at best move the default mini-sidebar-link class below the duplicated class, which is renamed?
It would be easier to set this active state in this mini-sidebar-link and in project settings make blocs/browsers use this as Active Link Class? So in this case use: mini-side-link?
Thanks and Kind Regards
Uwe
I will take a look at it now. 
Gorgeous and awesome
Thanks
Uwe
OK, I can already see the reason why it’s not working. It is because you are editing the style of the completely custom-made offcanvas menu. The Active Page Link styling is for the Navbar links.
Well, what else to do then? Not use the Active Page Link from Project Settings?
What instead? I even started without knowing the Active Class Link by setting it in the class right set up for that menu buttons.
What else for would be the “normal-hover-active-focus-visited” checkbox be for? I thought.
I can feel, I do it too complicated by overthinking it, but … 
Thanks and Kind Regards
Uwe
I haven’t attempted to apply the active page styles to the custom-built Offcanvas menus yet. I plan to conduct some testing when I have the opportunity, but definitely not this week as there are so many things I am working for relating to Blocs 6.
Of course, you can always manually style the active links for each of the pages, but I am not sure it is worth it in your situation.
BlockquoteOf course, you can always manually style the active links for each of the pages, but I am not sure it is worth it in your situation.
How do I do this? I am asking because the menu is globally attached.
Is my approach only possible with a not global menu? but a seperate menu for each page?
And again - if this seems to be possible in that:
Why does it not easily work oncde published?
And is this done in blocs 6 which I already purchased?
Thanks and Kind Regards
Uwe
The active state in the class editor will not work for this particular case, unfortunately.
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.
While this method is not ideal and may become cumbersome for larger websites, I am certain there will be a more efficient way to automate the process. Nevertheless, this approach will suffice.
