Nav links customized but still show some blue

Community resources Bugs
1

Hi there!

I’m new to Webflow, which I’m really digging right now. That said, I’m still learning and could use a little help from those with more experience than me.

I’m currently creating a pretty straightforward site (onca-coffee.webflow.io, but have a few questions:

  1. I’ve customized the nav link buttons on all states (like hover, pressed, etc.). However, when I go to the live site, sometimes the typical blue link color shows. Any suggestions on what could be going wrong?

  2. I have a drop in effect on the hero image on page load. My intention is that it would only happen when the page loads, but it happens every time I scroll to that section. I haven’t been able to figure out how to configure that for only on the initial page load, so suggestions are welcomed.

  3. I created a pop-up that happens when you scroll into the “Coffee” section. It’s quite abrupt, however, and I would like to add easing, but I don’t see how to do that with this effect. I currently have the modal as a hide and show effect on scroll in.

Thanks for your help!

Best,
Citrine

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

2

That’s the browser’s default focus state if I’m not wrong. Just add a custom style tag that takes care of that state and make it the color you want or even transparent.

Instead of using a section or whatever to trigger that animation, you need to select the “page load” as the trigger for that and create the bounce animation yourself. That’s the only no-code approach to it

The hide and show that you’re talking about is simply setting display:block and display:none. What you need is a fadeIn - fadeOut animation. However, I would recommend creating the whole animation by yourself instead of using the pre-built ones. It has been quite some time since the last time I used the stock ones. Creating animations by yourself gives you much more control over things, and I think it’s totally worth it.

3

Hi Jean,

Thanks much for responding. I do have the focused state customized. All the states actually. The blue shows up when transitioning from section to section. It’s like a weird little glitch. Any other thoughts?

As for the coffee bag, I’ve tried connecting the interaction to page load, but the only interactions are things like opacity and and move, not the ones like bounce and rubber band, if that makes sense. I don’t know how else to do it. That’s why I’m stumped. Other suggestions/thoughts?

And thanks for the reminder on the fade in fade out part of the interaction on the modal. I forgot to have the opacity first at 0, then eased in to 100% on the interaction, so now it works properly. Thanks!

Best,

Citrine

4

Can you share with me the link for the live website so I can take a loot at it?

You need to create that animation “manually”. Using basically the move in the Y-axis and using easings.

No problem, glad to help!

All the best,

5

Cool, thanks, Jean. Here’s the link to the live site: https://onca-coffee.webflow.io/

~ Citrine

1 Like
6

That’s happening because of the fact that you are scrolling over the sections that they point to. It’s the current state. Just make sure to give it a color that you want to, maybe the yellow? Make sure to set it, even though it might seem like is already selected.

image

If things through the designer doesn’t work, just add this to the head of your website>

<style>
.w-nav-link.w--current{
color: #eaa624
}
</style>
7

I have the yellowish-orange set as the current state, so it’s strange it doesn’t show up in the code. But I added the code you suggested to the head, and it seems to be working now, so many thank yous, Jean!

1 Like
8

Haha, I’m definitely glad to know about it Citrine!
Happy designs,
Jean :webflow_heart:

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.