How to add a DOT to a current state for a nav link. Or any other styling

Design help Custom code
1

I’m going to guess that this is a custom code solution! But could anyone help me out and guide me towards some videos or websites that explain how to do this? I feel like it’s relatively simple but I can’t seem to figure it out. If you could elaborate on this it would be awesome.

All I’m wanting is the current page that is selected to have a dot or any styled div to be active as well. I can’t change the current state of the nav link because I cannot get a dot out of it. I can get a classic underline as a ‘border’ but no other styling.

Here is a picture of what I’m trying to achieve in Webflow

Screenshot 2022-12-28 132751
Screenshot 2022-12-28 132751906×72 1.91 KB

Any help please! Would be very appreciated. I looked at timothy ricks wizardry jQuery builder but I’m not sure if that’s the right direction or not.

Thanks, Austin

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

2

Webflow dynamically adds a class to active links, so you could always target that with a psuedo-class with something like below:

.YOUR-LINK-CLASS.w--current:after { 
  content: ''; 
  display: block; 
  position: absolute; 
  border-radius: 100vw; 
  height: .5em; 
  width: .5em; 
  background-color: black; 
  top: 1.25em; 
  right: 0; }

Keep in mind you’ll want to use your own nav link class above and set it to position: relative (so we can align the dot appropriately) within the Designer. I just used some placeholder sizing, color, and top amount values so those will need some tweaks to match what you’ve got in your example photo :+1:

3

@mikeyevin Sorry I’m kind’ve new to custom code. Where would I put this code? Could I use this as an embed?
Would I create the design of the div block and then target that div block class with the example you showed in code somewhere?

Thanks so much for replying and helping me out with this!

4

Mike nailed it.

  • Yes, drop it into a code embed in your nav component.
  • Make sure to wrap it in <style></style> tags.
  • The .YOUR-LINK-CLASS is whatever class you assign to the element you’re wanting the dot next to. e.g if you 've classed them as Nav Item, the class would be .nav-item.

Share your readonly link if you’re still stuck, we need to see your code and class structure to give specifics.

1 Like
5

@mikeyevin @memetican
Worked perfectly I believe. I adjusted the padding I believe that was ‘top 1.25em’ in order to align in the middle. Then I did flex box on the nav-link itself.
Thank you memetican for clarifying everything. And mikeyevin for your solution.

I’m quite curious on if there is a way to design and do this with a div block that is already in webflow instead of designing the dot as an embed?

Here is shared link of what I did
https://preview.webflow.com/preview/northview-church?utm_medium=preview_link&utm_source=designer&utm_content=northview-church&preview=92b8484b058b8ca029239f0910b126d1&workflow=preview

1 Like
6

Hey Austin, here’s what you need to know if you want to try that.

3 Likes
7

@memetican Never considered this option — thanks for taking the time to walk through this as an alternative. Much easier for folks who like designing on canvas :+1:

8

Seriously amazing! Thank you so much for a video response clarifying this. This will be used on many future projects. Much appreciated! Have a great New Year :slight_smile: