Streaming live at 10am (PST)

Trouble with navbar

Hello Webflowers,

I am having trouble trying to find how to change the colour of my navbar menu options, when I select a page it seem’s to have a default colour blue, I would like to change it, I have tried for hours but can’t seem to find how I’m new to Webflow so feel a bit stupid because I know its something easy to know.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi nadalbay,

Please share your project’s read-only link with us.

Follow this link for more details on how to do so: how to share your site Read-Only link

hear it is https://preview.webflow.com/preview/nadeems-superb-project-eea634?utm_medium=preview_link&utm_source=dashboard&utm_content=nadeems-superb-project-eea634&preview=9537b9815a4ef74e220ec807b8ef3876&mode=preview

Hopefully this is the reply you were after:

First of all, unless you have a reason for all the nav links to have a different class, assign them the same class (as then you only need to style that class once. If you have 8 different classes, you will need to style them individually 8 times). Here is how I did it:

Next, and for ease of explanation here, ensure you are on your Home page. Then, select the relevant Home link in your Navigator (see picture above). You will notice that in the top right of your screen, it displays both the class name and “Current” - this is because you are applying the style to show on this Class only when you are on the page that link points to (I hope that makes sense). Below is how it should look for you when you have the Home link selected:

Finally, you can now apply styling to this selected class, and this styling will appear only when you are on the “current” page. In the example below (click the image to expand to full size), I have chosen for your nav link to be styled White when I am on the Current page, but you can apply any styling you like (font weight, size etc):

.

And here is the finished example:

You may also be interested to know that you can apply hover effects. Select the class that you want to affect, and in the top right toggle the dropdown and select “Hover” like so:
hover2 hover

You could then apply something like 50% transparency to the font, so that when you hover over each nav link it will look like this:
hover3

I hope this helps!

thank you so much I understood your post perfectly…

thank you

1 Like

You’re very welcome - please consider marking my post containing the answer as “Solution” if it is what you were after :slight_smile:

how do I do that…?

Haha - at the bottom of the post I made, there should be some grey/whitish text that says “Solution”. Just click that :wink: It helps anyone with a similar problem later on that might be reading your post jump straight to the right answer as well.

2019-10-08_15h41_40

All the best!

their u go thank you lol

1 Like