CODEWITHSUNDEEP
htmlcssscroll
Addy
Addy

Reputation: 28

how can I stop my site scrolling horizontaly and instead have it wrap onto a new line?

Thanks for solving this issue, this might be a duplicate but I am new to this and am wondering how I can stop this horizontal scroll on my site, here is a link to it as a codepen codepen and here is it on github github as i have mentioned I am struggling to get the horizontal scroll to stop and I would rather it wraps onto a new line rather than having it scroll onto a white space here is an example of the issueexample of the issue thanks navbar code as this is causing issue

  <nav class="navbar">
<div class="logo">
  <a href=index.html>
    <img src="Addy Schroeders.png" width="60px" height="60px">
  </a>
</div>
<div class="menu">
  <li>
    <a href="/">
      Home
    </a>
  </li>
  <li>
    <a href="/">
      About
    </a>
  </li>
  <li>
    <a href="/">
      help and resources
    </a>
  </li>
  <li class="services">
    <a href="/">
      pages
    </a>
    <!-- DROPDOWN MENU -->
    <ul class="dropdown">
      <li>
        <a href="template.html">
          Dropdown 1
        </a>
      </li>
      <li>
        <a href="/">
          Dropdown 2
        </a>
      </li>
      <li>
        <a href="/">
          Dropdown 2
        </a>
      </li>
      <li>
        <a href="/">
          Dropdown 3
        </a>
      </li>
      <li>
        <a href="/">
          Dropdown 4
        </a>
      </li>
    </ul>
  <li>
    <a href="/">
      Contact
    </a>
  </li>
</div>
</ul>

Upvotes: 1

Views: 47

Answers (2)

Mr. Sir
Mr. Sir

Reputation: 41

The flex-wrap CSS property can help you set whether flex items are either one line, or if they can wrap in multiple lines.

Upvotes: 1

otisjnz
otisjnz

Reputation: 136

To wrap the content, you can use display: flex and flex-wrap: wrap. This should make it wrap to a new line and fix your issue!

Upvotes: 1

Related Questions