How to edit menu items links and text

Design help CMS
1

Hi,

I am trying to edit the menu and link to new pages as well as generally tidy it up. How can I do this?

Secondly, the scrolling effect on the homepage doesn’t appear to be working when I share the site and works in the editor?

Here is my public share link: https://preview.webflow.com/preview/alexs-fantastic-project-eec399?utm_medium=preview_link&utm_source=designer&utm_content=alexs-fantastic-project-eec399&preview=4f27cae49d218c2b03e84395b24d7f2d&pageId=5e9efddfd158edadfe76b9f9&itemId=5e9efddfd158ed33bd76ba6e&mode=preview
(how to access public share link)

1 Like
2

Hello.
Set in (Navigator) ‘Menu Toggle’ - Interactions - Mouse click (tap) - On 1st click - Show Menu
On 2nd click - Close Menu

Then it works on my screen :slight_smile:

3

Hi, thank you for your reply. I can’t see how that can enable me to edit the names of menu items contained within the menu and then link to the respective pages?

4

Welcome to the forum @TLMA :wave:

I highly recommend this Webflow University article to you. Spend some time to go through it all, and the topic should be much clearer - it covers styling Nav Links, among other things.

EDIT: I can see that it’s not set up as a traditional Nav Bar, but uses Interactions to show/hide a menu overlay. Did you build this yourself, i.e. are you familiar with how the Interaction has been created, and understand what’s going on?

5

Hi Thank you for your link, I didn’t build this site this is a template that was purchased. What would you suggest that I do? In terms of titles being animated on the homepage, do they work for you?

6

Ok, so if you don’t have any prior knowledge of using Webflow Interactions this will be slightly trickier (but I promise it gets easier once you’ve practised a bit!)

So, double click inside your Navbar (as it’s a Symbol, which you can tell because it highlights in green when you hover over it - single clicking an element within a Symbol doesn’t work). Inside the Navbar, we can see that there is an Interaction tied to Menu Toggle, indicated by the green “lightning bolt” shown below.

image

So, let’s see what Interaction is tied to this element. With Menu Toggle selected, click on the Interactions button in the very top right of your screen:

image

We can see a number of Interactions tied to this element. Fortunately they are named sensibly: for example, on Mouse Click (tap) it triggers the Interaction “Show Menu”:

image

Let’s dive into that one. Click on the top Interaction, and you’ll be greeted with this menu:

image
image240×904 11.9 KB

Hover over “Show Menu”, and click the cog to bring up this menu:

image
image245×963 5.16 KB

Without going to deep into this, because all I intend to do is show you exactly how this brings your menu overlay up… We can see that this Interaction specifically affects the element Menu Overlay (it sets an initial Opacity and Hide/Show value, as shown by the first two sequences).

Now that we know which element this Interaction targets, we know how to edit the menu overlay (named Menu Overlay, quite conveniently…)!

Head back over to your Navigator, and locate Menu Overlay. We can see that it is set to “Hide” (as the Interaction sets it to “Show”, therefore it must start hidden), as denoted by the eyeball icon.

image
image356×501 16 KB

With Menu Overlay selected, take a look at it’s styling. We can see that under “Display”, it is set to “Hidden”.

image
image246×908 21.8 KB

Simply set the Display to Block, and voila! You can now see and click inside your Menu Overlay in order to edit the text/links etc within.

image
image2224×1287 209 KB

I’m not going to go into detail about Interactions, partly because of the length of time it would take, but partly because it’s already covered in depth by this Webflow University course. I highly recommend that you take the time to work through these tutorials, particularly as the template you have purchased is loaded with Interactions!

Hope this helps.

7

Wow!!! Andy, thank you so much for your help! You’re a superstar! For more information on editing the links, the course you linked ought to cover it? Right?

1 Like
8

Hey @TLMA,

You’re welcome! For simpler actions such as editing links, check out this tutorial.

If you are brand new to Webflow as a whole, I highly recommend working through some of the beginner’s courses available on Webflow University, available here. Take your time - while you may already understand many of the concepts, by spending a day or two going through these courses, you’ll find your workflow much improved and will end up saving yourself time in the long run.

If there’s anything else you get stuck with that isn’t covered by the tutorials, always do feel free to reach out on the forums! (I always advise to use the search bar first, as chances are someone else has had the same issue and you may find a quick resolution).

2 Likes