CSS prevents page scrolling

HTML & CSS
1

I am building a website (unfortunately, I have to use Nicepage (bosses wish)).

I wanted to make something special, so I added a menu with html/css. This works just fine. However, since I added the menu, it is not possible to scroll anymore. Since I am a complete CSS beginner, I can only guess that this is because the buttons position is fixed. When I delete the CSS, the html of course still appears and the scrolling is possible again. So the mistake needs to be somewhere within the CSS.

The website with the scrolling problem is can be visited here: www.previewpage.ch/ltp1
The website where I deleted the html/css to show that there is more text can be visited here: www.previewpage.ch/ltp2

The CSS looks like that:

`@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Roboto&display=swap');

.test{
    box-sizing: border-box;
}

*::before,
*::after{
    box-sizing: inherit;
}

html{
    font-size: 62.5%;
}

body{
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.42;
    margin: 0;
    overflow: hidden;
}

 h1{
    color: #fff;
    padding: 20rem 8rem;
}

h2{
  padding: 0 3rem;
}
.navigation__checkbox{
    display: none;
	
}

.navigation__button{
    background-color: #fff;
    height: 5rem;
    width: 5rem;
    position: fixed;
    top: 6rem;
    right: 6rem;
    border-radius: 50%;
    z-index: 100;
    box-shadow: 2rem 0.5rem 2rem rgba(155, 154, 154, 0.482);
    text-align: center;
    cursor: pointer;
}


.navigation__icon{
    position: relative;
    margin-top: 2.5rem;
}

.navigation__icon, .navigation__icon::before, .navigation__icon::after{
    width: 3rem;
    height: 2px;
    background-color: black;
    display: inline-block;
	
}

.navigation__icon::before, .navigation__icon::after{
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s;
}

.navigation__icon::before{
    top: -.8rem;
}

.navigation__icon::after{
    top: .8rem;
}

.navigation__button:hover .navigation__icon::before{
    top: -1rem;
}

.navigation__button:hover .navigation__icon::after{
    top: 1rem;
}


.navigation__checkbox:checked + .navigation__button .navigation__icon{
    background-color: transparent;
}

.navigation__checkbox:checked + .navigation__button .navigation__icon::before{
    top: 0;
    transform: rotate(135deg);
}

.navigation__checkbox:checked + .navigation__button .navigation__icon::after{
    top: 0;
    transform: rotate(-135deg);
}


/*Navigation Background*/

.navigation__background{
    height: 3rem;
    width: 3rem;
    position: fixed;
    top: 7rem;
    right: 7rem;
    opacity: 1;
    background-image: radial-gradient(rgba(12, 158, 165), rgba(41, 41, 40));
    z-index: 80;
    transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
				border-radius: 50%;
}

.navigation__nav{
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    opacity: 0;
    width: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navigation__list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    list-style: none;
}

.navigation__item{
    margin: 1rem;
}

.navigation__link:link, .navigation__link:visited{
    display: inline-block;
    font-size: 3rem;
    font-weight: 300;
    padding: 1rem 2rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
    background-size: 250%;
    transition: all .4s;
}

.navigation__link:hover, .navigation__link:active{
    background-position: 100%;
    color: #000;
    transform: translateX(1rem);
}

.navigation__checkbox:checked ~ .navigation__background{
    transform: scale(100);
	border-radius: 50%;
}

.navigation__checkbox:checked ~ .navigation__nav{
    opacity: 1;
    width: 100%;
	border-radius: 50%;
}`

the html that goes with it like this:

`<div class="navigation">
    <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
    <label for="navi-toggle" class="navigation__button">
      <span class="navigation__icon">&nbsp;</span>
    </label>
    <div class="navigation__background"></div>
    <nav class="navigation__nav">
      <ul class="navigation__list">
        <li class="navigation__item"><a href="https://app.desktop.nicepage.com/201977768" class="navigation__link">Was ist Lerntherapie</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link">Über mich</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link">Kontakt</a></li>
      </ul>
    </nav>
  </div>`

Can someone help me with that. And sorry if it is a stupid question but this is my first CSS and I am glad that I got as far as I got :slight_smile:

Thanks for your help!

2

I spotted two rules preventing the page from scrolling.
One is in your CSS:-

body{
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.42;
    margin: 0;
    overflow: hidden; /* This one here */
}

The other is in nicepage.css line: 3159:-

overflow-y: clip;
1 Like
3

Hi Sam

THANK YOU SOOOOOOO much!
You made my day!

I simply deleted the lines and it works just fine!

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.