Skip to main content

Lesson 6 of 7 · 1:31 · Beginner · Webflow

Navbars for members and visitors

Give public pages and member pages their own navbar, and keep both easy to manage.

Where this fits

Members now land in the right place. Next, make sure your links don’t point visitors to pages meant for members.

By the end of this lesson you can

  • Copy a navbar pair from Memberstack components
  • Turn each navbar into a Webflow component, one public and one for members
  • Use the public navbar on public pages and the members navbar on members pages

Heads up: Hiding a link doesn’t lock the page behind it. Only gated content does, which is Journey 3. The notes below also show one navbar that changes when someone logs in.

Lesson notes

How it works

Why navbars matter on a membership site

Your navbar is where visitors find links. If your public pages link straight to members-only pages, visitors will click them and try to get in. So keep members-only links off public pages, and give members their own navigation.

Hiding a link doesn't lock a page. Anyone who knows the URL can still type it in. Pages are protected by Gated Content, which you'll set up in Journey 3: Memberstack checks the visitor's access and sends anyone without it to your Access Denied URL. Navbars shape what people see. Gated Content decides who gets in.

How to set up a public navbar and a members navbar

Turning each navbar into a Webflow component means you edit one copy of each, and the change shows on every page that uses it.

  1. In your Memberstack dashboard, go to Components and copy a navbar pair.
  2. Paste it into Webflow and delete the instructions, keeping the two navbars.
  3. Turn the members navbar into a Webflow component, for example "Members only nav".
  4. Turn the public navbar into a component, for example "Public nav".
  5. Put the public navbar on public pages and the members navbar on members-only pages.

One navbar that changes when someone logs in

You can also use a single navbar and let Memberstack show or hide parts of it. Add data-ms-content="!members" to Login and Sign up buttons so they only show to logged-out visitors. Add data-ms-content="members" to member links like Dashboard or Profile so they only show to logged-in members. Add data-ms-action="logout" to a link to make it a working log out button.

Memberstack reads these attributes when the page loads and hides whatever doesn't match the visitor. This works on any page, public or private.

Before you move on

0 of 4

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: Last in this journey, you’ll give members a place to edit their own account.

Common questions

Does hiding navbar links protect my members-only pages?

No. Anyone with the URL can still try the page. Use Memberstack Gated Content to restrict the page and send visitors without access to an Access Denied URL.

How do I hide the login button when a member is logged in?

Add data-ms-content="!members" to it. Memberstack shows that element only to logged-out visitors and hides it once someone logs in.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    One thing that’s super important for making sure your content is secure is your links and your nav bars so let’s go ahead and talk about the best way to set those up on your Memberstack site first things first you’re going to want two different nav bars and to make things easier what you can do is go to the components page in your Memberstack dashboard and copy a navbar pair here we have this let’s copy it and let’s paste it in just like that now let’s get rid of these instructions and keep only the nav bars there we go now we’ve got our two

  2. 0:33

    separate nav bars so this one here that we can see at the bottom is a members only nav bar and it just says something in something but we would probably have some links that go to other members only Pages we do not want this to be on public facing Pages like this one let’s go ahead and take this and turn it into a component and let’s haul it members only nav just like that and we do not want that to be here let’s get rid of it and then over here let’s use our public facing

  3. 1:04

    nav bar which as you can see would have different links in it all together and let’s turn that as well into a component let’s call it public nav bar and save that so we’re gonna keep this one on these pages and then over here we can add our members only nav and this is going to help it so that people who shouldn’t access our content won’t be able to access it

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.