Sub Menu Issue

*SOLVED* Sub Menu Issue

/*open child menus on left */
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    left: auto;
    right: 100%;
}
/* clear sub menu symbol from right side of menu item */
.main-navigation ul ul li.menu-item-has-children > a::after, .main-navigation ul ul li.page_item_has_children > a::after {
    content: "";
    display: none;
}
/* add sub menu symbol to left side of menu item */
.main-navigation ul ul li.menu-item-has-children > a::before, .main-navigation ul ul li.page_item_has_children > a::before {
    content: "\f104";
    color: rgb(255, 159, 231);
    text-shadow: none;
    font-family: Genericons;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    margin: 0 0.4 0 0em;
    padding: 0;
    line-height: 1;
    display: inline-block;
    vertical-align: text-top;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-font-smoothing: antialiased; 
    left: -9em;
}
.main-navigation ul li {
    list-style: none;
}

1) This can be added to Child Theme css or any other overriding css file.

2) Modify styling as needed

3) Here is some of the child menu css styling you can modify. If needed, add to the end of the css above:

.sub-menu li a {
    color: rgb(0, 0, 0) !important;
    font-style: normal !important;
    font-family: Raleway !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
.sub-menu li:hover, .sub-menu li a:hover {
    color: rgb(0, 0, 0) !important;
    background: rgb(193, 253, 255) !important;
}
.sub-menu li:active {
    background: rgb(201, 253, 255);
}

*SOLVED* Sub Menu Issue

Here is a solution I came up with to make the Affinity theme child menus open to the left.

Add this to the Child theme css or other external css file you use for styling.

/* Open child menus on left */
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    left: auto;
    right: 100%;
}
/* Clear sub-menu symbol from right side */
.main-navigation ul ul li.menu-item-has-children > a::after, .main-navigation ul ul li.page_item_has_children > a::after {
    content: "";
    display: none;
}
/* Add sub-menu symbol to left side */
.main-navigation ul ul li.menu-item-has-children > a::before, .main-navigation ul ul li.page_item_has_children > a::before {
    content: "\f104";
    color: rgb(255, 159, 231);
    text-shadow: none;
    font-family: Genericons;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    margin: 0 0.4 0 0em;
    padding: 0;
    line-height: 1;
    display: inline-block;
    vertical-align: text-top;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-font-smoothing: antialiased; 
    left: -9em;
}
.main-navigation ul li {
    list-style: none;
}

If you need to style the sub menus you can add this to the bottom of that css:

.sub-menu li a {
    color: rgb(0, 0, 0) !important;
    font-style: normal !important;
    font-family: Raleway !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
.sub-menu li:hover, .sub-menu li a:hover {
    color: rgb(0, 0, 0) !important;
    background: rgb(193, 253, 255) !important;
}
.sub-menu li:active {
    background: rgb(201, 253, 255);
}

Thanks for posting your solution in case it helps others!

For anyone who might find this thread in the future, just be sure not to edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

An easy way to add custom CSS is to use the CSS editor included in the Customizer as of WordPress 4.7. Head to Appearance > Customize > Additional CSS to add your custom CSS.