Nav Bar Styling and Functionality

[cathy]

Hey Webflow & users!

I have a few questions relating to the Nav Bar if anyone would like to help!

How do I link a name in my dropdown menu to a section on another page? I know how to link to another page but not on a particular section. How is this done?

How do I change the colour of the names on my dropdown menu once they have been clicked on and directed to other sections? I have tested this out with the various states (hover/pressed/focused) but they are still showing in a default blue colour:

Is it possible to make one of your titles on your dropdown menu into a button instead of a dropdown menu? Example; Our work (dropdown menu), About us (dropdown menu), Contact (button), Client Login (button)

Are there any useful tutorials I could watch that would help me learn about styling the dropdown menu etc?

Here is the link to my site: https://preview.webflow.com/preview/vrxstudiostest?preview=d6b7c05caf2767179319e234344171fa

Thank you so much in advance

Cathy

[DFink (Dave)]

For linking to anchors on a page simply put in /page#sectionname

Looks like you figured the rest out but heres a tutorial for dropdowns https://help.webflow.com/article/using-the-dropdown-component-in-webflow

[cathy]

This is the URL I am testing it out with on the nav bar sticky but it’s not working: https://webflow.com/design/vrxstudiostest/ourwork#services I am trying to link “services” under “our work” to the services container on the next page…

[Phoxic (Liam)]

Go to the Our Work page, click the Services section. Then open the settings panel in the right sidebar (the cog icon) and in the ID field enter services.

Then publish and test.

[cathy]

The webflow page “not found” keeps popping up unfortunately…https://webflow.com/design/vrxstudiostest/ourwork#services

Here’s the settings I am using;

Is this process case sensitive? Do I tag “Nav” or “Section” or do I leave that part out under the ID field?

Cheers

[Phoxic (Liam)]

First of all, change the Tag on the Services Container element to Div, and remove the ID. Now select the Section it is contained in. See highlighted element in screenshot:

Then give it these settings:

Now open the dropdown menu for Our Work:

And select the Projects link and change the link settings and publish.

URL: http://vrxstudiotest.webflow.io/our-work#services

This will obviously only work on the webflow.io version of the site, change the URL to vrxstudiotest.com or whatever your custom domain is to make it work on that.

This is a workaround, as I don’t think there is a way to define a link to a section in a different page currently.

Hopefully that works.

[cathy]

Thank you for your support, unfortunately it didn’t work again:

I’m going to keep trying and suss it out though!

Here’s the link to my site if it helps: https://preview.webflow.com/preview/vrxstudiostest?preview=d6b7c05caf2767179319e234344171fa

[Phoxic (Liam)]

Whoops, there should be a dash between our-work in the link URL. See my edit in the previous post. Make sure to then publish the site to the webflow.io domain and open http://vrxstudiostest.webflow.io/ to test. It won’t work when previewing in the Webflow designer.

[Phoxic (Liam)]

Yep, but before you do that, you can disable the Webflow subdomain from being indexed by search engines (so they won’t see it) by following these instructions:

Disable search engine indexing | Webflow University

Then you can go ahead and publish it to the subdomain to test the nav links.
To unpublish it, simply click the unpublish link.

[cathy]

Thanks for this! It didn’t work once I published the site But i’m going to do it a few times again and see what happens. I’ll keep you posted.

Cheers for the help!

[cathy]

No luck Phoxic! I tried changing the name of “services” to see if that would make any difference but it doesn’t. So close but yet so far

I need to link 4 links from my dropdown menu to other sections on different pages. Please tell me this is possible Webflow!!

Thanks for all your help today anyway, much appreciated.

[Waldo (Waldo Broodrÿk)]

@cathy you should be able to create anchor links to other pages by following this procedure (keep in mind that your ID’s are case sensitive):

Linking to Anchors or Sections in other pages

We don’t have the functionality yet to choose a section on a specific page yet, but we want to add that in. As @bartekkustra mentioned right now it will work if you add your page name and section like this in the URL tab: /page#section. The downside of this is if you change your page name or anything else it won’t automatically update that URL.

[cathy]

Thanks Waldo. @Waldo

Is there a chance you can break down this process in very basic terms? I have tried to complete the instructions listed above many times and I still can’t get this to work…

I really appreciate your help!

[cathy]

https://preview.webflow.com/preview/vrxstudiostest?preview=d6b7c05caf2767179319e234344171fa