wordpress responsive mobile nav with css grid?

[TechRush]

I've been struggling to make a responsive nav menu for wordpress that uses php wp_nav_menu to generate the links, I've been trying to make it using grid as I intend to expand on the nav layout later on but have not been able to succesfully complete this step. Does anyone have any suggestions for how to go about it?

<div class="container">
<logo><svg logo></logo>
<toggle><i fa-toggle-icon></<toggle>
<nav>
	<?php
			wp_nav_menu( array(
				'theme_location' => 'menu-1',
				'menu_id'        => 'primary-menu',
			) );
			?>
</nav>
<socials>
	<?php wp_nav_menu( array( 
    				'theme_location' => 'my-custom-menu', 
    				'container_class' => 'custom-menu-class' ) ); 
					?>
</socials>
</div>

what i want the menu to look like -
[logo]_ _ _ _[toggle]
[	   main nav     ]
[ sub nav 			]
[ sub nav 			]
[ sub nav 			]
[	  mainnav link 2 etc ]
[ twitter - facebook etc]

The current intended layout isn't incporating drop down for the submenu - all the main nav and sub nav links in the full menu will be visible when the toggle is clicked.

main issues im havig is that the main nav links and sub nav links go beyond the header container and also cover the socials div. the nav div needs to expand to accomidate the nav and subnav links, and the socials nav needs to move down below the nav div.