How to make menu and content not overlap

I have a question about collapsable menu.

This is an example from w3 school with Bootstrap 3.
Bootstrap 4 and 3 are slightly different in navigations.
I reproduced this example with Bootstrap 4.

When the screen is small, the menu is collapsed. When I open the menu, the menu is overlapped with the content below. How to change the code in the example from w3 school?

My personal portfolio suffers the same issue.

Please try using “sticky-top” in your nav element instead of “fixed-top”.

This should get it working the way you want.

First of all you use CSS in ul and li tags and devlop your best menu and use with bootstrap

I tried before. sticky-top does solve the problem.