▼
Streaming live at 10am (PST)

Creating Current Links with a Dot Next to the link?

Design help General
#1

I need to have my links show a dot when it’s on that active link. How would I do this guys? I know it can be done in Webflow because I’ve seen it over and over again.

Thanks,
Sean

Here is my public share link: LINK
(how to access public share link)

#2

Hey @seank,

Just apply a single dot image to the left of your active link and then float the link to the right. Use padding to allow the space for the image and the text can grow without ever covering up the image.

Hope this helps.

Naweed

#3 
<ul class="ul-list w-list-unstyled">
      <li class="ul-item"><a class="link" href="/">Text Link</a>
      </li>
      <li class="ul-item"><a class="link" href="#">Text Link</a>
      </li>
      <li class="ul-item"><a class="link" href="#">Text Link</a>
      </li>
</ul>



.link {
  color: #000;
  text-decoration: none;
}

.link:hover {
  list-style-type: disc;
}

.link.w--current {
  list-style-type: disc;
}

And then add this custom code

a.link{
        display: list-item;
      }
1 Like
#4

So I would just apply an image to the left of the ~Current status? And that wouldn’t show up on the normal state?

Thanks,
Sean

#5

Thank you sir! I was just looking to do it on Wefblow using their tools if possible.

#6

Can anyone provide me more detail on how I would accomplish this in Webflow please.

Thanks,
Sean

#7

I tried this and I couldn’t get it to work?

#8

Guys I really need help please… @sabanna @PixelGeek - got a second to lend a hand?

#9

Their adding the current class to the list item you can do this to but you need a scrollspy pluging that add the class to the current link. WF only add this functionality to links.

@samliew maybe you can help us here!

Captura de pantalla 2016-10-13 a las 3.43.21 p.m..png347×823 37.8 KB

http://exceptional-site-1fc3a5.webflow.io/

#10

Instead of changing the list style, you can do this

.link:before {
  content: '•';
  display: inline-block;
  margin-right: 3px;
  color: transparent;
}
.link:hover:before,
.link.w--current:before {
  color: black;
}
1 Like
#11

yay! @samliew is back! :slight_smile:

#12

I was thinking about this and for me it’s the best solution, not possible without custom code like @seank wants but it works. Thanks for the help @samliew

#13

I would avoid JS where possible, but if you need to give a class to the current link’s parent element,

<script>
$(function() {
  $('.w--current').parent().addClass('active');
});
</script>

@seank should provide more info on the project instead of us trying to figure out what exactly he needs.

I am always here, but will only focus on replying to topics in the general/codehelp categories, that have a clear problem statement, a share+published link, and one that I can put together an answer in less than 10 minutes.

1 Like
#14

Ok thank you all… Can you tell me where I would place these pieces?

Best,
Sean

#15

No, the code above only works in theory, and it needs to be customized based on your actual requirements and site structure.

#16

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