Thanks for the article. I think I may now have to add eyes to my active links π
We'll add one state to our SASS, called: &.router-link-exact-active. You could read more about this here
I think that link is broken - it just takes me to this post again.
First, we'll tell our SASS that the span inside our links by default will have display:none, we don't want to see it all the time
I'm generally not a fan of overriding an entire element's format like that, or adding DOM elements and then using display: none; to hide them. Wouldn't it be better to use something like
I think that link is broken - it just takes me to this post again.
So sorry! It's up and running now, thought! Thank you so much for pointing it out!
Also, it's no big deal since we're not destroying/creating the element in the DOM all over again. Since this is not a function or variable it's a minor thing to override it!
But please use this as you may like and as you prefer, that's the important thing! Thank you for sharing it!
Also, it's no big deal since we're not destroying/creating the element in the DOM all over again. Since this is not a function or variable it's a minor thing to override it!
I'm not so worried about performance as breaking other functionality.
Admittedly, I don't think I've ever used a <span/> inside a menu before, but I might want to, one day* (e.g. for e-commerce, add a <span class="category-discount">-15%</span> to the Shoes menu).
If you set <span/>s to display: none, you might have to use something like <span class="category-discount" style="display: inline-block !important">-15%</span>, or another override to your override.
I always try to work on as specific selectors as possible, and only add what is needed.
*Maybe a case of YAGNI and overthinking :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks for the article. I think I may now have to add eyes to my active links π
I think that link is broken - it just takes me to this post again.
I'm generally not a fan of overriding an entire element's format like that, or adding DOM elements and then using
display: none;
to hide them. Wouldn't it be better to use something likeinstead?
So sorry! It's up and running now, thought! Thank you so much for pointing it out!
Also, it's no big deal since we're not destroying/creating the element in the DOM all over again. Since this is not a function or variable it's a minor thing to override it!
But please use this as you may like and as you prefer, that's the important thing! Thank you for sharing it!
I'm not so worried about performance as breaking other functionality.
Admittedly, I don't think I've ever used a
<span/>
inside a menu before, but I might want to, one day* (e.g. for e-commerce, add a<span class="category-discount">-15%</span>
to the Shoes menu).If you set
<span/>s
todisplay: none
, you might have to use something like<span class="category-discount" style="display: inline-block !important">-15%</span>
, or another override to your override.I always try to work on as specific selectors as possible, and only add what is needed.
*Maybe a case of YAGNI and overthinking :)