Webpage unable to scroll

Having trouble with scrolling on my webpage and I can't figure out why! The issue is happening when trying to view this page:

Within the main file, I have included 2 other php files:

<?php
    include '../../include/menu.php';
    include '../../include/layout.php';
?>

I have shared links to these 3 php files:
The main index.php: https://pastebin.com/c27dEi4e
Menu file - menu.php: https://pastebin.com/AYy0AY00
Layout file - layout.php: https://pastebin.com/h0swdiMf

Answer №1

Upon examining your code in the browser console, I discovered that you have included overflow: hidden in your CSS:

body, html { 
    height: 100%;
    margin: 0; 
    overflow: hidden; // needs to be removed
}

Please remove the overflow: hidden for it to function properly.

https://i.sstatic.net/Zhywr.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through an array of objects with Node.js

Recently, I integrated the ChartJS library into my Node web app to visualize data. The following is nested in a script tag on an EJS template page: <script> let playerStatChart = new Chart(myChart, { type: 'bar', data: { la ...

I'm attempting to execute a piece of code that retrieves a status count from a dataframe, the output of which will be displayed above my pandas html table

#Here is an example of a dataframe: import pandas as pd import numpy as np data = [['001', 'Completed'], ['002', 'In Process'], ['003', 'Not Started'], ['004''Completed ...

Various inline SVG elements not rendering properly on HTML page

I have converted several PDF files to SVG using a tool called pdftocairo. These SVG files can be viewed in a browser without any issues. You can find one of the SVG files here. However, when I try to embed multiple different SVG files into the same HTML ...

Variations in functionality within the Google Chrome browser

This is the content of my HTML document. <BODY> <button id="b1" onclick="load()">Play</button> <canvas id="c1" onclick="f_clicked(this.id,1)"> Your browser does not support the HTML5 canvas tag. </canvas> ...

What steps do I need to take to link my form with Ajax and successfully submit it?

Here is my HTML code: {% extends 'base.html' %} {% block content %} <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create a Recipe ...

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

Access a webpage in an html document using URL variables

In the process of developing an MVC web app without utilizing any MVC framework, I have created an index.html file with a section that dynamically loads all the views as needed by the user. However, I encountered an issue where direct URLs such as www.foo. ...

The icon for the weather on openweathermap is currently not displaying

Take a look at what my webpage looks like: http://prntscr.com/dg6dmm and also check out my codepen link: http://codepen.io/johnthorlby/pen/dOmaEr I am trying to extract the weather icon from the api call and display that icon (e.g. "02n") on the page base ...

Tips for preventing the state of a checkbox from being saved in the browsing history

I have implemented a mobile menu using a checkbox, with the following simplified code: input, ul { display: none; } label { cursor: pointer; } input:checked ~ ul { display: block; } <input type="checkbox" id="toggle-menu" /> <label for="t ...

I am interested in setting the background for blogger headings H2, H3, and H4 to match the size

view the image hereI am using Blogger and have implemented CSS for H2, H3, and H4 tags with custom background and text size styles. However, I am facing an issue where I want the background size to automatically adjust according to the text size instead of ...

Using JSON within HTML: A guide to sanitizing stringified objects

Is there a way to improve the readability of a string that looks like an object but is actually just a string? It currently does not look very nice and easy to read. Using JSON.parse doesn't work because not every element in the string meets the requi ...

How can I redirect a remote image URL to a local folder during development?

Currently, I am pulling image URLs from a database that was dumped from the production server. An example of one of these URLs is https://example.com/imageStorage/photo.jpg. These URLs are then used to display images in HTML templates using the following f ...

CSS :empty selector failing to target elements

I have a situation where I utilized the :empty selector within the .error class. However, I'm encountering an issue where even if there is no content inside the div with the error class, the error class does not get removed entirely. Upon examination ...

Disregarding 'zIndex' directive within JavaScript function, an image stands apart

There is an issue with the z-index values of rows of images on my webpage. Normally, the z-index values increase as you scroll further down the page. However, I want certain items to have a lower z-index than the rest (except on hover). These items are i ...

What is the maximum file size that the data link is able to store?

For instance, a file like an image, video, or sound can be saved in the data link Take an image for example, it may be stored with the initial link: data:image/jpeg;base64,/..... followed by various characters. But, is there a specified size limit at whic ...

First-character styling not applying to ID in CSS

My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...

Error 404: The requested file could not be located on the MAMP server

Whenever I try to access a PHP file on MAMP, I keep getting a 404 error message. The error reads: "The requested URL /‘welcome.php’ was not found on this server." Oddly enough, both the HTML and PHP files work perfectly fine when accessed via localho ...

How can we have a div stay at the top of the screen when scrolling down, but return to its original position when scrolling back up?

By utilizing this code, a div with position: absolute (top: 46px) on a page will become fixed to the top of the page (top: 0px) once the user scrolls to a certain point (the distance from the div to the top of the page). $(window).scroll(function (e) { ...

Transmitting the identification number of a post with the help of J

I am currently working on a while loop in PHP that fetches associated results from a query and displays them within a class identified by the user who created the post. My goal is to send the id of the class to PHP, similar to how I am sending the num vari ...

Choosing specific text below an element

I'm having trouble selecting specific text from the table below <section id="bullet_features"> <h2>Additional Features</h2> <p> Knife Steel: 8Cr13MoV, satin finish <br> Handle: Molded co-polymer <br> Blade: 3.6 in. ...