How to setup the Split Menu and Custom CSS Button

With the use of Flexbox we can split our menu to enable right-aligned action items to be positioned away from informational navigation.

In this example, we've set a custom class name for the Support Menu item which means all menu items from Support will be aligned to the right.

You can decide which Menu items should be grouped to the right by adding a custom class to the menu item in 

WordPress admin dashboard → Appearance → Menus 

Click on the "Screen Options" drop-down in the top right of the page and then make the "CSS Classes" checkbox has been checked. Here's a screenshot illustrating this:

Minimise the Screen Options and then select a menu item. 

Expand the menu item and then in the "CSS Class (Optional)" field, add the class

diviwp-menu-right-align

Here's an example:

Anything to the right of the menu item will then be positioned on the far right of the page while the menu will be positioned in the center. 

The "Buy Now" button in the above example is also included in the Custom CSS code module and is fully editable by adding the class "diviwp-menu-button" to your menu item like the image below:

To edit this class, scroll to the following section in the Custom CSS code module:

/***** DIVIWP MENU BUTTON *****/

You can update the values to use your own background-colors and text colors.