CODEWITHSUNDEEP
htmlcssdebugging
testman
testman

Reputation: 57

How would I prevent body from scrolling even when scrolling on hamburger menu?

I have a hamburger menu scrolled all the way to the bottom of the screen. The problem I'm facing is that even when I scroll my finger up and down on the hamburger menu, the entire page scrolls along with it.

I've tried numerous solutions online but can't seem to get it working. Below is my current HTML and numerous attempts with CSS (too many to list).

What's a good way to tackle this problem?

Here's my HTML:

<div class="mobile-nav container">
    <div class="collapse navbar-collapse" id="user-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" class="active-status menu-item">Item 1</a>
                </li>
                <li>
                    <a href="#" class="active-status menu-item">Item 2</a>
                </li>
                <li>
                    <a href="#" class="active-status menu-item">Item 3</a>
                </li>
                <li>
                    <a href="#" class="active-status menu-item">Item 4</a>
                </li>
                <li>
                    <a href="#" class="active-status menu-item">Item 5</a>
                </li>
                <li>
                    <a href="#" class="active-status menu-item">Item 6</a>
                </li>
                <li>
                    <a href='#' data-dismiss="modal">Item 7</a>
                </li>
                <li>
                    <a href='#' class="active-status menu-item">Item 8</a>
                </li>
        </ul>
    </div>

Attempts with CSS:

mobile-nav.container {
  border-top: 2px solid #f47e1f;
  overflow: hidden;
  position: absolute;
}

#user-navbar-collapse-1 {
  position: fixed;
  overflow: hidden;
}

Upvotes: 1

Views: 610

Answers (1)

Lukas Bobinas
Lukas Bobinas

Reputation: 701

Most of the time the overflow: hidden; CSS property on the body, html should do the trick. Setting also the height: 100% and margin: 0 is advised, but usually not necessary.

Upvotes: 2

Related Questions