Code to show and hide nav bar links based in login status

Does anyone want java script code to show hide nav bar items based on login status? Or maybe that bug is already fixed in webflow? I spent quite a while figuring out how to make it work.

Eh sorry Simon, I need to publish this stuff better, but I have an attributes-based solution for that as part of Sygnal Attributes.

Did you use the same approach of testing for the wf_loggedin cookie?

1 Like

Hi @Simon_Manning thank you for offering this up to the community :pray:

Gosh, I think this is the one and only situation that I’ve bumped into making me sorry to say that they did indeed fix this :grimacing:

That said, yes, please post it!

It could still help somebody, and maybe give someone (or yourself) the opportunity to extend it beyond what Webflow’s built-in solution provides.

The awesome upgrade to this would, that many are asking for, would be identifying specific users to show/hide elements for :+1:

Here’s the new feature BTW:

1 Like

As a newbie I tried posting the code all at once but it did not look good. Since I was only using the WF custom code section I could not screen shot all the code and I don’t have a IDE on my current laptop.

Here is what I did;

I was trying to use the inner html from the logged in button to control visibility of the items on the nav bar but that did not work because of the way the button functioned. Ie the button text would always be read before it was updated by webflow and give the wrong result.

The answer was to delay reading the text until after it was updated by Webflow.

First I set all the navbar link elements display to “none” before the page loads, like this;

document.getElementById(“logged-in-page”).style.display = “none”;

Then I created a function that determines the visibility of the elements based on the text on the log in button. Ie if it reads “log in” or “log out”. Then I set a timeout for the function that delays it for a few micro seconds. This allows the Webflow log in function to execute and update the buttons inner html text to the correct state before the button text is assigned to the variable “loggedIn” that holds it

setTimeout(NavbarElements,7);
function NavbarElements() {
loggedIn = document.getElementById(“log-in-button”).innerHTML;

That way you only check the button text after its updated. Then you can use “if” Booleans to decide which nav links to display.

if (loggedIn == “Log in”) {
document.getElementById(“supervision”).style.display = “block”;

if (loggedIn == “Log out”) {
document.getElementById(“logged-in-page”).style.display = “block”;

I doubt this is needed by anyone now but I finally got around to posting it.

Thanks, I can now delete the code and go back to the webflow editor,)

Hi, no I finally posted my solution below. I just used the login button html text but I needed to put a delay on reading it since it takes time to update. But this is interesting. Thanks.

Nice! I used a similar approach at first, and with similar problems. Timing issues are a pain to handle elegantly but MutationObservers are handy.

Note that the login button text can change, but the two text options ( log in text, log out text ) are actually present as custom attributes on the button, so you can retrieve them and compare them to the current value to determine login state automatically.

Keep your code, you may need it awhile longer, I think that the memberships team is still working out the kinks in conditional visibility, particularly within components.

1 Like

I cant get this to work for me. I assign a visibility condition and the navigator panel says the element is bound and has the correct visibility condition, i.e. it is visible when user is logged out. But it doesn’t work for me. The element is still visible when logged in. I think i’m leaving it for now and going to work on something else Ill just activate the code I wrote.