Custom Header Right Widget Area in Genesis

Sorry, I still have some problem,
I used the Pretty Chic theme version 3.1 for my website.
web site : http://www.girlsyouareloved.com/shop

I add the following code
//* Add WooCommerce header_widget
add_action( ‘genesis_header’, ‘add_woocommerce_header_widget’ );
function add_woocommerce_header_widget() {
if ( is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop() ) {
genesis_widget_area( ‘woocommerce-header-right’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
}

genesis_register_sidebar( array(
‘id’ => ‘woocommerce-header-right’,
‘name’ => __( ‘WooCommerce Header Right’, ‘genesis’ ),
) );

the new Custom Header Right Widget is Vertical arrangement and all color is pink,
it doesn’t use Pretty Chic theme. It’s also make the shop page sub menu disappear.
What can I do to make the Custom Header have same type,and not don’t make the shop page sub menu disappear. thanks!

(the image before and after I add this code
https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit)

Hi, I have clearly read that post
but I have used this code for my sub-menu，as following code

//* Hook WooCommerce menu after header conditionally
add_action( ‘genesis_before_content_sidebar_wrap’, ‘woocommerce_shop_page_menu’, 12 );
function woocommerce_shop_page_menu() {

if ( ! class_exists( ‘WooCommerce’ ) )
return;

if ( is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop() ) {
genesis_nav_menu( array(
‘theme_location’ => ‘woocommerce-menu’,
‘container’ => false,
‘depth’ => 1,
‘fallback_cb’ => false,
‘menu_class’ => ‘genesis-nav-menu wrap nav-primary class’,
) );
}

}
//* Remove nav-menu from WooCommerce page
add_action(‘get_header’, ‘child_remove_genesis_do_nav’);
function child_remove_genesis_do_nav() {
if (is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop()) {
remove_action( ‘genesis_before_content_sidebar_wrap’, ‘genesis_do_nav’ );
}
}

And the top menu use custom_header_widget,
the new Custom Header Right Widget is Vertical arrangement and all color is pink,
it doesn’t use Pretty Chic theme. It’s also make the shop page sub menu disappear.
What can I do to make the Custom Header have same type,and not don’t make the shop page sub menu disappear. thanks!
Is it necessary to add new menu to solve this questions?
and I have add a new one already,should I add new second menu?

(this web site is image for my questions
https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit )

Sorry, and again to ask you,previously your reply was also read in detail,but on this code and about my theme is still a little problem.
Website using Pretty Chic theme version 3.1
Web site : http://www.girlsyouareloved.com/shop
There are currently installed style plugin.
At the top of the menu, the site uses the code in the tutorial,
But the format on the menu is sorted vertically downwards and the colors are all pink.
In the original header_widget, the sorted format is sorted horizontally to the right,
How to adjust the code to the same original header_widget format?
Also ask whether such a question is related to the style.css setting?

The following is a description of the screenshots before and after adjustment
https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit
Thank you！