The Mobile Side Menu Is Not Scrollable

I've encountered an issue with the side menu on my website. While it works perfectly fine on PC, it refuses to scroll on mobile devices. I've tested it on both my iPhone 5 and iPad, but no luck. Additionally, the toggle button isn't functioning properly on Internet Explorer. This problem has been plaguing me for a week now and it's becoming increasingly frustrating.

The URL for my website is: www.koddersleri.com, and the content is in my native language.

Here is the JSBin link for reference: https://jsbin.com/zeqolacoke/1/edit?html,css,js,output

The sidebar was originally sourced from: , with some modifications made by me. I'm grateful for any assistance provided.

Edit: I've observed that you have to touch the menu multiple times on mobile for it to start working. However, this is still not ideal.

Thank you

javascriptjqueryhtmlcssnavbar

Answer №1

To resolve the issue, ensure that you include overflow-y: scroll; in another CSS element.

@media (max-width: 768px) {
    .side-menu-container > .navbar-nav {
        overflow-y: scroll;
    }
}

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

Tips for using CSS to position a sidebar on the right side of the screen:

I've been working on creating a simple sidebar and have reached this point in my code. However, I'm struggling to get it to float to the right. It's all a bit confusing for me. If you'd like to take a look at the code, here is a link t ...

htmlcss

The fetch() POST request is met with an error message stating "415 Unsupported Media Type"

I keep encountering a 415 error when attempting to upload a PDF file using fetch(). The PDF file resides in the same directory as the js file, and the name is correct. async function uploadFile(filePath, extension, timestamp) { const url = "https ...

javascriptnode.jsfetch-apihubspot-api

What is causing styled-components to include my attributes in the DOM?

In various parts of my code, there is a snippet like this: import React from 'react' import styled from 'styled-components' type PropsType = { direction?: 'horizontal' | 'vertical' flex?: number | string width ...

javascriptreactjstypescriptnext.jsstyled-components

When attempting to render a base64 string in an <img> tag using ReactJS, an error message ERR_INVALID_URL is displayed

I am currently working on displaying server-generated images (specifically matplotlib graphs) in a ReactJS module without needing to save the files on the server. To achieve this, I decided to use base64 to create an image string. When it comes time to sh ...

javascriptimagereactjsbase64

Ways to access a JavaScript function on a div with multiple identifiers

Currently working on developing a discussion panel using ASP.net, where each comment is assigned a unique id. I am looking to trigger the jQuery click function whenever a user clicks on a comment. However, since the comment ids are dynamically assigned an ...

c#javascriptjqueryasp.net

Javascript window.scroll function malfunctioning in some browsers while running in localhost

Check out this codepen link where everything is working, but unfortunately not locally: https://codepen.io/LoudDesignStudios/pen/RwxPJKY <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> < ...

javascripthtmlcss

Harmonizing database with AJAX-powered webpage

When using ajax calls to update data on a web page, what is the most effective way to synchronize changes with a database? For example, if I have a comment form that needs to work asynchronously. I write JS code to submit the form data to the database, but ...

javascriptajax

How come the parameters in my function are being displayed as boolean values in JSDocs when that is not the intended behavior?

I am documenting my journey of following the React tutorial for tic-tac-toe, and I'm puzzled as to why the parameters of my function are showing up as boolean values in JSDocs when they are not supposed to. When I hover over the function with my curs ...

javascriptreactjsjsdoc

Choosing the open status of an HTML list

Is there a way to determine which containers in a list are currently open and which ones are still closed? Currently, I am utilizing the slideDown(), slideDown(), and addClass functions on divs with the specific class="section_hdl_aktiv". However, I want ...

javascriptjqueryslidetoggle

Are there any npm modules available that can efficiently transform unstructured information into a CSV format?

In my Javascript project, I am trying to export data into a CSV file. However, I am facing an issue as the data I have may contain different headers for each row. For example, the data structure could be like this: [ { name: 'John', color: &apo ...

javascriptnode.jsnpmexport-to-csvnode-modules

What strategies can be employed to utilize JSON data for populating two distinct views?

In my Rails application, I have two view ports that display the same data. The JSON format for retrieving this data looks like: $.read( '/en/search/fetch_companies', { current_location_lat: 72, current_location_lng: 10, bounding_box: 10 ...

jqueryruby-on-railsajaxruby-on-rails-3

Next.js is throwing an unhandled runtime error of type TypeError, which is causing issues with reading properties of null, specifically the 'default' property

"use client" import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs' import Image from 'next/image'; import React from 'react' function DashboardHeader() { const {user} = useKindeBrowserClient(); r ...

javascriptnext.jstypeerror

"Refine Your Grid with a Pinterest-Inspired

I've set up a grid of images in columns similar to Pinterest that I would like to filter. The images vary in height but all have the same width. The issue arises when a taller image is followed by a shorter one, causing the short image to float right ...

javascriptjqueryhtmlcss

How can one efficiently navigate through extensive functions without risking surpassing the stack limit?

I am currently developing an application in Node.js that requires numerous configuration and database calls to process user data. The problem I am facing is that after reaching 11,800+ function calls, Node throws a RangeError and exits the process. The er ...

javascriptnode.jscouchdbexpress

Animating CSS when closing a modal box

I followed the instructions from a tutorial on W3Schools here to create this code. The "open model" button triggers the modal to open with a smooth CSS animation, which looks great. However, when I click the close button, the modal abruptly closes without ...

javascriptcssanimationmodal-dialog

Accessing a JSON key using a JavaScript variable

Is there a way to dynamically replace the key "Argentina" in a JSON object with a javascript variable string? jQuery(document).ready(function() { $.getJSON('countries.json', function(data) { var output= data.Argentina[0].countryPho ...

javascriptjson

Ways to verify the element prior to the completion of the request?

Utilizing Angular and Playwright Within my application, I have incorporated 2 buttons - one for delete mode and another for refreshing. Whenever the user triggers a refresh action, the delete mode button is disabled. Once the request returns, the delete m ...

javascriptplaywrightplaywright-test

How can I move a child element off-center within a parent div in CSS without affecting the position of the other child

Below is an example of code that demonstrates what I'm trying to accomplish: <nav className="flex flex-row justify-between items-center w-full h-[100px]"> <div className="flex flex-row items-center sm:pl-0 ml-auto"> ...

htmlcssnext.jstailwind-css

Creating personalized hooks that rely on React query requests

Utilizing a series of custom hooks, I am able to fetch data and perform various calculations based on that data. One particular hook calculates the total amount that should be set aside monthly for future expenses, using the output from previous data-fetch ...

javascriptreactjsnext.jsreact-query

The privateroute is throwing an error because it cannot access the property state since

I stumbled upon a tutorial online detailing how to construct a customized private route, but alas, I am encountering an error. Upon execution, I am faced with the dreaded message: "Cannot read property 'state' of undefined" on line 12. As someon ...

javascriptreactjs