How to make menu and content not overlap

1

I have a question about collapsable menu.

This is an example from w3 school with Bootstrap 3. https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_scrollspy&stacked=h
Bootstrap 4 and 3 are slightly different in navigations.
I reproduced this example with Bootstrap 4. https://codepen.io/yingjiehu/pen/YEoxEJ

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. https://codepen.io/yingjiehu/pen/jajwGd

2

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

This should get it working the way you want.

3

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

4

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