Optimize
1.8K members online now
1.8K members online now
Learn how to create your first experiment and get tips on creating A/B, redirect, and multivariate tests.
Guide Me
star_border
Reply

A/B Testing Order in Hover Drop Down Menu

[ Edited ]
Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

Hello,

 

I would like to know how I can change the order in a hover drop down menu, in order to perform an A/B test.

 

Thank you,

1 Expert replyverified_user

A/B Testing Order in Hover Drop Down Menu

Google Employee
# 2
Google Employee

This is a little bit tricky:

 

- Go to "interactive mode" button (top-right) so that you may interact with your page and show up the drop-down menu

- Place your mouse cursor over the menu item that you want to move - the editor still selects elements when in interactive mode.

- Use the key shortcut Shift-Enter to exit interactive mode. Even though your hover menu will disappear, the editor will still have that menu item selected.

- Open the "Select elements" dialog (square icon on the top left - just before the hierarchy bar)

- There you will see the CSS selector of the menu item. Have a look at the last :nth-of-type() part of the selector. This should have the position of the menu item in the menu

- You may need to remove anything else that is after that last :nth-of-type (in case you selected something inside the menu item)

- Click on "Add change" and select Reorder.

- There you have to change the index in the last :nth-of-type() part of the target element selector, to the menu item that you want be before your selected menu item.

- Click apply and go back to interactive mode to see if it worked. If you didn't got the menu item indexes right, you may exit interactive mode, modify your change in the change list and go back to check again.

 

I hope it works.

A/B Testing Order in Hover Drop Down Menu

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

Thank you Dimitris, this really helped a lot. 

 

Cheers from Athena.