Need some help with css for navigation menu (visited)

[Deepak]

Hello,

I have added a link in the private info section for reference
It has a checkbox before every menu item which turns to blue color for all the links which are visited by the end user.
Currently I am using a simple CSS

#left-sidebar .menu-ansible-menu-container ul li a:visited {
    color: #505050 !important;
}

But with this it is very hard to differentiate between the visited and non-visited links. I don’t want the exact css as the one I have provided, but is there any way to add some icon or CSS similar which can be used to show “visited” link more clearly.

Thanks in advance

[David]

Hi there,

the way that Navigation works would require custom Development.
It simple enough to add an ‘image’ before each menu item and even change its color when its the active menu item – but to also highlight those elements above the current item is a custom menu.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Deepak]

Hello,

are you aware of any plugin which can help with such menu?

I could add a tickmark using :beforeelement but it looks like I cannot use :before with :visited

As when I combine a:before:visited then it doesn’t work.

I am not expecting a completely same solution. Something I can put in the icon section (may be an svg icon). So I can use different icon for visited and non visited link?

OR If you can help me how to place svg icon (I don’t want to use FontAwesome) in the menu just before the menu list?

Regards
Deepak

[Tom]

I wonder if a plugin like this would help?: https://wordpress.org/plugins/svg-vector-icon-plugin/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Deepak]

Thanks Tom,

Apologies for the delayed response.

It did gave some HINT but I felt this would need too much work so I dropped the idea and have added simple bullet with different color scheme based on my requirement.

Keeping it simple 🙂

Thanks for your support.

[Tom]

Simple is good! No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts