Estimated reading: 1 minute 158 views

You may see some direction or steps highlighted on the theme doc demo pages as like the below screenshot.

We used the [direction] shortcode to render the design of the steps. Your shortcode could be [direction]Theme Options > Header > Top of Header > Menu Element[/direction] Use the > character as the direction separator icon. This character (>) will be replaced with an arrow-right icon by default.

You can change the icon with some custom CSS. See the code below-

.direction_step + .direction_step:before {
  content: "\35";
  font-family: eleganticons;

​Here the content value is the Elegant Icon​ code. You would not find the icon code directly on the Elegant Icon’s website. Inspect the icon by right-clicking on it from their website. Then navigate to the CSS ::before CSS Pseudo-elements to see the icon code. Watch the below GIF to see the process of inspection and taking of the icon code.


Leave a Comment

Share this Doc


Or copy link


We're on a mission.

At RetainMaxx, we are dedicated to providing comprehensive Employee Retention Credit (ERC) solutions to help businesses maximize their benefits and navigate the complexities of ERC. Our team of experts is committed to delivering personalized services tailored to your unique needs, ensuring that you optimize your ERC opportunities and retain valuable financial resources.


© 2023 All Rights Reserved by RetainMaxx | Designed And Developed By AGE