How can I share a non-primary menu of a Multisite’s main domain across all sub-domains in the form of tabs as links?

I have a Multisite with a main domain (www.valleysgroup.co.uk) and various sub-domains (brickslipsdirect.valleysgroup.co.uk, tradeporcelain.valleysgroup.co.uk etc).

I am wanting to share a custom top bar containing a menu that is not the primary menu of the main domain, from the main domain across all the sub-domains. This menu will be simple links to each of the sub-domains, but in the form of tabs. Tab 1 will lead to brickslipsdirect.valleysgroup.co.uk, tab 2 will lead to tradeporcelain.valleysgroup.co.uk etc.

I have spent several days trying various solutions, which I then came across the plugin: Multisite Shared Menu

This works great, apart from it will only apply the primary menu from the main domain, and no other menu’s. Ideally I would like to create a new menu location named Global Top Bar on the main domain and all subs, create my menu named Global Menu on the main domain, and then pull the menu into all the subs.

I am also unsure how to implement this on the main domain and sub-domains as tabs instead of a general horizontal, dropdown or list menu.

Please see image for clarity on what I am looking for looks-wise across the main domain and the subs:

Any help would be greatly appreciated!

Answer

I have now gone ahead and added my new menu location named Global Top Bar using the following in my main domains Child Theme > Functions.php file:

function register_new_menu_location() {
   register_nav_menu('global-menu-location',__( 'Global Top Bar' ));
}
add_action( 'init', 'register_new_menu_location' );

I have also created my menu named Global Menu and marked for it to display in the newly made location.

I have then gone into my Child Theme > Header.php file and added the following which seem to work:

switch_to_blog(1);
wp_nav_menu( array(
    'menu' => '16',
    'container_class' => 'GlobalMenuContainerClass',
    'menu_class' => 'GlobalMenuClass'
) );
restore_current_blog();

Menu ‘16‘ being my menu’s ID found on my main domain. This displays the menu on all sub-domains like this:

I Added some CSS to spice it up a little and make it look more like tabs using the following CSS code:

.GlobalMenuContainerClass {
  height: 45px;
  padding-top: 8px;
  padding-right: 100px;
  padding-left: 100px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background: #cc2325;
}

.GlobalMenuClass {
  list-style: none;
  margin: 0;
  padding: 0;
}

.GlobalMenuClass li a {
  text-decoration: none;
  float: left;
  margin-right: 5px;
  color: white;
  border: 1px solid #777777;
  padding: 5px 10px 5px 10px;
  min-width: 100px;
  text-align: center;
  display: block;
  background: #777777;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.GlobalMenuClass li a:hover:not(.active) {
  background: #4e4e4e;
  border: 1px solid #4e4e4e;
}

.active {
  background: white;
  color: black;
  border: 1px solid white;
}

And here is how it now looks:

You can see there is a different hover colour for the tabs of a darker grey, but I have not yet implemented the .active tab CSS yet. Not quite sure how I am going to do this yet.

Hope this can help others in a similar situation.