0

I am trying to build a website using BS4.

the main design of the website I have the navigation menu on the left and the content on the right. The problem I have is, When I scale it down, the content goes under the navigation bar.

scaled down menu

I am going to share a simplified version of my code. It is something like this:

<body style="margin: 0px;">
  <div class="main">
    <div class = "row">
      <div id ="x" class = "col-md-1">
      </div>
      <div class = "col-md-11 mt-4">
      </div>
    </div>
 </div>

</body>

So I have two divs, id="x" for the left menu and the other one for the content ("Merhaba").

I do not want merhaba to go under the navigation bar. I only want contents of merhaba to stack under each other when I resize.

I have tried making overflow hidden and making the positions abolute. Both didn't work.

Ibrahim Altay
  • 95
  • 7
  • Your columns stack on a device smaller than medium/md (< 768 px). Consider using col-auto and col for the left hand navigation and content respectively. The linked question links to BS3, that does not talk about the flex classes such as auto and just vanilla col. – Patrick Mar 08 '20 at 13:55
  • Thank you very much. I have made the left side "col-auto" and the right side "col". Now it seems to work correctly. – Ibrahim Altay Mar 08 '20 at 14:00

0 Answers0