How to fix this multiple toggle for button nav displying content separated (see image below)

[tomasts248]

Is easier to explain with an image

That shows when clicking on the button, the content should be display all in the left side, but separated for non collapsed state.

Code for the button:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContentLeft, #navbarSupportedContentRight" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
		</button>

Tried this but doens't solve it https://stackoverflow.com/questions/48970058/bootstrap-4-collapsing-two-navbars-into-one-toggle-button

[aribudin]

please write sample code in codepen!

[tomasts248]

Well instead of linking to it via multiple data-target ids, I created a separated menu for mobile using Nav-Walker for Wordpress were i merged the two menus using this https://cerkit.com/2016/01/02/merging-two-menus-in-a-custom-wordpress-theme/
In other words this mobile menu is linked via data-target to the button, and not the menu on the sides. Hope it helps if someone has the same problem