Choose the Position for your “SUB” …
Add an Offset to your “SUB”
Choose a CSS Class for your "DiviMenu Flex"
Give the “DiviMenu Flex” module the corresponding CSS Class depending on where you want to reveal the SUB around your Menu Item.
Copy one of these 3 CSS Classes:
sub-left
sub-top
sub-right
You can assign one of these 3 CSS Classes to the “DiviMenus Flex” module so that all Menu Items simultaneously take that position:
Paste the CSS Class into DiviMenus Flex > Advanced > CSS Class
Or you can assign different CSS Classes to each Menu Item in the “DiviMenu Flex” if you want each Menu Item to reveal its SUB in a different position:
Paste the CSS Class into each Menu Item > Advanced > CSS Class
Set the "SUB Custom Display" to Hover
Turn on the Menu Item > SUB > “Use Custom Display” option and choose the “Over the page elements when hovering” option so that everything works correctly on Desktop, Tablet and Phone, as well as Horizontal and Vertical DiviMenus.
This is necessary to force the Absolute Position of the SUB on all devices, since in Vertical DiviMenus the SUBs have Relative Position by default.
Once this field is activated, the SUBs will be displayed properly on top of the page content regardless of device and DiviMenu orientation (horizontal or vertical).
Set the "SUB Offset" to 0px from the "DiviMenus Flex" module
Go to each Menu Item > Content > Link > SUB , and set the “SUB Offset” to 0px.
Although the default value of the “SUB Offset” field is 10px, please change this value to 0px from the “DiviMenus Flex” module:.
If you want to apply a “SUB Offset” later you must do it from the corresponding provided code, replacing the highlighted 10px value to your liking.
Show Arrows
Activate or deactivate the “Show Arrow” field from Menu item > SUB > “Show Arrow”, if you want to show the triangle pointing towards the SUB.
For this example to work correctly, you must leave the “Arrow Direction” fields as default (upwards).
Code Snippets
Copy the Code Snippet you want below and paste it into your Page Settings > Advanced > Custom CSS. Play around with the values to your liking.
NOTE: Menu Items on this example page reveal a WordPress Menu created from Appareance > Menus. Keep in mind that you can assign both a WordPress Menu or a Divi Layout as a “SUB”. Simply adjust the size of your SUB so that it looks well on each device.
SUB LEFT
/* SUB LEFT */
.sub-left .dd-menu-flex-sub {
top: 50%;
left: 0!important;
transform: translate(-100%,-50%)!important;
}
.sub-left .dd-item:after {
top: 50%!important;
left: 0!important;
transform: translate(0, -50%) rotate(90deg)!important;
}
SUB LEFT + Offset (10px)
/* SUB LEFT WITH OFFSET */
.sub-left-offset .dd-menu-flex-sub {
top: 50%;
left: -10px!important;
transform: translate(-100%,-50%)!important;
}
.sub-left-offset .dd-item:after {
top: 50%!important;
left: -10px!important;
transform: translate(0, -50%) rotate(90deg)!important;
}
Replace the highlighted 10px value to your liking.
SUB TOP
/* SUB TOP */
.sub-top .dd-menu-flex-sub {
bottom: 100%;
transform: translate(-50%,0)!important;
}
.sub-top .dd-item:after {
top: 0!important;
transform: translate(-50%, 0) rotate(180deg)!important;
}
SUB TOP + Offset (10px)
/* SUB TOP WITH OFFSET */
.sub-top-offset .dd-menu-flex-sub {
bottom: 100%!important;
transform: translate(-50%,-10px)!important;
}
.sub-top-offset .dd-item:after {
top: -10px!important;
transform: translate(-50%, 0) rotate(180deg)!important;
}
Replace the highlighted 10px value to your liking.
SUB RIGHT
/* SUB RIGHT */
.sub-right .dd-menu-flex-sub {
top: 50%;
left: 100%!important;
transform: translate(0,-50%)!important;
}
.sub-right .dd-item:after {
top: 50%!important;
left: 100%!important;
margin-left: 0px!important;
transform: translate(-100%, -50%) rotate(-90deg)!important;
}
SUB RIGHT + Offset (10px)
/* SUB RIGHT WITH OFFSET */
.sub-right-offset .dd-menu-flex-sub {
top: 50%;
left: 100%!important;
transform: translate(10px,-50%)!important;
}
.sub-right-offset .dd-item:after {
top: 50%!important;
left: 100%!important;
margin-left: 10px!important;
transform: translate(-100%, -50%) rotate(-90deg)!important;
}
Replace the highlighted 10px value to your liking.
🥳 That’s it!