PVgr supports this item


This author's response time can be up to 2 business days.

19 comments found.

Nice design (Oraioooos!) :)

Thanks mate! (Eyharisto poli)

Is it responsive?

Responsive, no, fluid, yes! The widths are indeed percentages, however, the minimum width depends on the actual contents. The CSS will need a few changes to make the steps stack vertically for narrow screens, and a different design is needed too since the right-pointing arrows would make no sense! I could make something for your specific needs though.

The third version is already uploaded and it is responsive!

If it were responsive! Will you do something about it?

I’m not actively working on that but I have done some tests. The question is, would you like it to become vertical on very narrow widths or hide the titles? Hiding the titles is quite easy but it might make the Indicator useless as a navigation element. On the other hand, stacking the steps vertically might occupy too much space. I could use some feedback!

Thank you for the prompt response. I actually thought hard about it after I left you this comment. I think on very narrow widths, it should remove the titles. Many responsive designs are like that. Stacking the steps will occupy too much real estate which is lacking on mobile devices. Hiding the titles will do the magic!

The third version is already uploaded and it is responsive!

HI I just purchased this and need to make a seven step process but it only goes to five any suggestions or alternate modern.css file?

Thank you for purchasing this! I could make a seven step indicator for you but I need you to tell me what style you need.

Hi, does it have callback functions when you change steps?

Hi. This is just HTML/CSS, no JavaScript, so no callbacks!

Hello, Is it difficult to modify Multi-step Indicator to show 12 stages? I want to use it for showing months.

I’m interested in the indicators on screen shot 2 blue/grey on the bottom.

Hello. I could make a 12 stage indicator for you but there might be some alignment issues if there isn’t enough horizontal space. I will need to run some tests.

Don’t worry, I have found other way how to do it. Thanks anyway.

No problem!

Hi, I just purchased it, but I have no idea at all how to install it, could you explain me step by step, thanks.

Thank you for purchasing! This is item is not supposed to be “installed” I’m afraid, it needs to be incorporated in your source files/templates. Please send me a link to the page/site you plan to use it and I will do my best to help you out!

It’s matval.se, survey site about food, form page start when you click Formulär.


I see that the site is based on WordPress. I suppose that every step of the survey is on a different page. It doesn’t look difficult but I cannot do this now, please let me get back to you first thing in the morning. Please use my personal e-mail from now on, contact@prince.gr. Thanks again!

Thanks for this, but any chance to have this in RTL? (Right to Left) this could be really used if we could have that… .

Thank you for purchasing! It shouldn’t be too hard to make a RTL version. It might be as easy as flipping the backgrounds and another option is to use CSS3 transforms — but that would rule IE 8 out. Let me do some tests and see how it goes.


Nice little piece of CSS. I have it rolled into my site, with one problem that is driving me up the wall..

The right side of the indicators are being clipped off.

I’m using the modern layout, style #2, firefly indicates that all CSS is being handled by your original css. I’m viewing it in both firefox and safari, (latest versions of both). the thing is, your examples work perfectly.. its just when its pasted into my page that the right side of the images clip off.

Pulling my hair out.


I’m sorry for your trouble. It looks like a minor bug (that another user has in fact already found) and is going to be fixed in the next version, soon-ish! You should find a z-index:-1 in line #34 of the modern.css file that should be changed to z-index:0. If that does not solve your problem, please send me an e-mail to contact@prince.gr with a link to the page you are building, or anything that might help me troubleshoot. Thanks!

Awesome! Nice and Simple! And responsive (with limitations… no problem…). Congratulations! Regards from next world champion! []´s

Thank you very much and good luck with the championship!

please update your description to mention you only support 5 steps. now i have to spend time to update the css files. thanks.

I need more time to make this “the right way”, and it might be quite difficult to make Ten steps responsive. The fact that the indicator is based on background images does not help! I should really start writing a Sass version, with SVGs for backgrounds, and leave IE 8 behind. In the meantime, you could add the following CSS rules as a start and maybe fine-tune some font-sizes / paddings:

div.multi-step.ten-steps .title { font-size:.8em; } div.multi-step.ten-steps.numbered .title { display: none; } div.multi-step.ten-steps ol > li { background-position: -10px 50%; width: 10%; } div.multi-step.ten-steps ol > li .wrap:before { left: 16px; } div.multi-step.ten-steps ol > li:before { left: 10.5%; } div.multi-step.ten-steps ol > li + li:before { left: 20.3%; } div.multi-step.ten-steps ol > li + li + li:before { left: 30.0%; } div.multi-step.ten-steps ol > li + li + li + li:before { left: 39.8%; } div.multi-step.ten-steps ol > li + li + li + li + li:before { left: 49.5%; } div.multi-step.ten-steps ol > li + li + li + li + li + li:before { left: 59.3%; } div.multi-step.ten-steps ol > li + li + li + li + li + li + li:before { left: 69.0%; } div.multi-step.ten-steps ol > li + li + li + li + li + li + li + li:before { left: 78.8%; } div.multi-step.ten-steps ol > li + li + li + li + li + li + li + li + li:before { left: 88.6%; } div.multi-step.ten-steps ol > li + li + li + li + li + li + li + li + li + li:before { left: 100%; }

yea that didn’t work. it wouldn’t even display right with only the numbers. i found another progress bar for my project. i’ll use yours on another project where i need exactly what it was built for and 5 or fewer steps lol. thanks for your help!

I’m sorry to hear that it didn’t work for your project. Please, don’t hesitate to use my personal e-mail, contact@prince.gr if you need any help.

You really should say it only supports 5 steps.
If you know of any limitation you should warn us.
Nice product if you need need 5 or less items.

It is true that the Multi-step Indicator currently cannot gracefully handle more than five steps, since it was originally based on the “best practice’ that a checkout process should not be longer than five steps. But! A new, modern version is on the way, that is re-written, based on Flexbox, that should handle any (within reason) number of steps! Thank you for purchasing my compenent.

Can you advise on how to modify a step so that it has a hover effect.

You should use the LIs for :hover states. The background color is assigned to the pseudo elements of each LI, :before and :after, in line 51 of the multi-step-indicator.scss file. Please use my personal e-mail, contact@pvgr.eu if you need help with a specific implementation and I’ll do my best. Thank you for purchasing!

I’m also having the problem with style#2 arrows cutting off on the right side (so it is square). The z-index is already set at 0 in the modern CSS file. What is the solution to this problem?

I’ve tried the multi-step indicator wizard as an alternative since it doesn’t use any images. However, I cannot get the backgrounds of the active and inactive arrows to show at all. But it does show on the mobile version with the appropriate colors (as blocks). Please help.

I’m afraid I need to see your implementation. Please send me an e-mail to contact@pvgr.eu with a link to follow an try to fix your problem. Thank you.

Hello, I’m looking for a way to implement the multi-step indicator to be responsive in such a way that the steps stack vertically on small screen sizes. The screenshot on the product detail seemed to indicate that this would be possible, but I haven’t been able to figure out how to do that yet. How do you tell the steps to stack vertically instead of horizontal?

The fourth version of Multi-step Indicator was build to be responsive and stack out of the box — you shouldn’t have to do anything special. Please send me an e-mail at contact@pvgr.eu with a link to your implementation or something that might help me understand your problem. Thank you.

Hi, do I need to know any software languages such as javascript, php, css etc. in order to use this plugin? I am looking for something very simple and straight forward without knowing any software languages. Thank you.

Hi, few more question as below: 1. I want it to work exactly like this, or even better (http://5staropportunity.biz/). Is it possible with your plugin? 2. This plugin is for wordpress? Thanks.

Sorry. Forget the word “plugin”. just want to know will it be able to work like http://5staropportunity.biz/? And can it be use in wordpress?

I think I might be able to style it like the one you linked to, and I believe that many buyers have succesfully integrated this in WordPress templates. You really need to know a bit about HTML / CSS though!

I’m looking for a demo. I can only find the screenshots.

Please send me an e-mail at contact@pvgr.eu and I will gladly send you a demo.

Pre-purchase question: Is your plugin current?


PVgr Author

This “plugin” is Flexbox based so yes, it is considered current, since all modern browsers support Flexbox fine. However, I should point out that this is not a plugin in the WordPress sense, it is a bunch of HTML and Sass code that you should incorporate in your codebase. Please use my personal email, contact@pvgr.eu and I will gladly send you the required HTML and the generated stylesheet, to see if it is useful to you.