Is there a way to remove the scrollbar from the menu created with react-burger-menu?

How can I remove the scroll bar from the menu created with react-burger-menu? Despite trying various CSS properties adjustments, I have not been able to achieve the desired effect. Here is an image of the open menu and the corresponding CSS:

(https://i.stack.imgur.com/UyFBW.png)

/* Nav */

 .bm-burger-button {
    position: relative;
    right: 10px;
    padding: 0;
    margin: 0;
    width: 26px;
    height: 20px;
    margin-top: 0px;
    padding-top: 0px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.bm-burger-bars {
    background: #373a47;
}

.bm-burger-bars-hover {
    background: #a90000;
}

.bm-cross-button {
    height: 24px;
    width: 24px;
}

.bm-cross {
    background: #bdc3c7;
}

.bm-menu-wrap {
    position: relative;
    overflow: hidden;
    margin-top: -30px;
    padding-bottom: px;
}

.bm-menu {
    background: #373a47;
    padding: 2.5em 1.5em 0;
    font-size: 1.15em;
    position: relative;
    overflow: hidden;
}

.bm-morph-shape {
    fill: #373a47;
}

.bm-item-list {
    color: #b8b7ad;
    padding: 0.8em;
    height: 200px;
}

.bm-item {
    display: inline-block;
    color: #d1d1d1;
    margin-bottom: 10px;
    text-align: left;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
}

.bm-item:hover {
    color: #ffffff;
}

.bm-overlay {
    background: rgba(0, 0, 0, 0.3);
}

I attempted adjusting the heights of the menu and menu wrap properties to no avail. The menu was originally misaligned, prompting me to shift it upwards to cover part of the screen. While this solution worked for my current setup, the scroll bar issue persisted. Any guidance on resolving this matter would be greatly appreciated. The HTML structure currently places the menu nested within the header section of the application.

Answer №1

To resolve the issue, I adjusted the max-height property within the .bm-item-list class to be set at 95%. Despite successfully fixing the problem, I remain unsure of the underlying reason for this solution. Any insights or explanations would be greatly appreciated.

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

I can't figure out why I'm having trouble installing npm react-google-charts

When working on an existing React project and creating a new one with npm init, I encountered an error after running npm install react-google-charts. Why am I receiving the following error message (some lines have been edited out)? npm ERR! Linux 4.15.0-3 ...

What is the method for configuring automatic text color in CKEditor?

Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Trebuchet MS"; font-size: 12px; ...

Using CSS to show only the central portion of an image

How can I display only the center part of an image with dimensions height=300px and width=520px using CSS or jQuery? I tried searching on Google, but didn't find a solution. Is it possible to show only a 200x130 section from the center of an image us ...

Exploring nested optgroup functionality in React.js

Within my code, I am utilizing a nested optgroup: <select> <optgroup label="A"> <optgroup label="B"> <option>C</option> <option>D</option> <option>G</option> </optg ...

What is the process by which the browser displays pseudo-element selectors?

One thing that's been on my mind is the potential resource cost of using *:after. Would the pseudo element be the primary selector, or would all elements still be processed by the client? In simpler terms, what impact does *:after have compared to ju ...

I am encountering an error while trying to add a service in EmailJS. What could be causing

I encountered a 412 Gmail_API error message indicating that the request had insufficient authentication scopes when I attempted to set up a service in Email JS. The same error occurred when trying to send an email using the React.js library. Here is a scr ...

When implementing Next.js layouts, the content will be displayed below the sidebar

I'm currently working on implementing a sidebar component for my app using mantine.dev, along with next.js layouts to ensure it is displayed on every page. The links within the sidebar are functioning properly, however, I am facing an issue where the ...

"Enhance User Experience with Material UI Autocomplete feature that allows for multiple

I am encountering an issue with a material ui auto component that I am currently working on. The component's code looks like this: <Autocomplete multiple options={props.cats} defaultValue={editRequest? ...

How to position a "figure" element at the center using CSS creatively (without relying on Div elements)

Struggling with my first website creation, I encountered a challenge in centering three inline-block images using CSS. Despite successfully using the figure tag to title and display the images, I couldn't get them to align horizontally from the cente ...

Error: The 'Storage' variable has not been defined

Just starting out with React and trying to learn from various online resources. I stumbled upon some MERN full stack login code on the internet. When I run npm start, everything works fine, but when I try npm test, I get an error saying 'ReferenceErro ...

Choosing an item prior to a break in the text line

I designed a navigation bar with the following CSS structure nav { text-align: center; } nav > ul { list-style: none; padding: 0; margin: 8px auto; } nav > ul > li { display: inline- ...

Troubleshooting Issue with React Function's Conditional Component Rendering

Currently, I am working on honing my skills in React using Codesandbox. My goal is to conditionally display a functional React component inside a function (within a class-based component) that triggers when a button is clicked. If you'd like to take ...

Employ jQuery for toggling CSS rotation

I have a plugin set up to handle the CSS3 attribute. It currently rotates 45 degrees when clicked, but doesn't rotate back when clicked again to hide the content. Any ideas on how to fix this? $("#faq dt").click(function() { $(this).next('dd ...

Animating elements with CSS keyframes for scaling and translating transformations

I'm having trouble manipulating the size and position of an absolutely positioned div. Even after scaling, the div doesn't end up where I intended it to be in my keyframe animation. I suspect that this issue is caused by the fixed coordinates of ...

What is the best way to hand off children to a class in Next.js?

Is there a way to assign children to this specific class? export default class MyLayout extends App { state = { somestate: false, anotherstate: true, }; togglestate = (somestate) => { this.setState({ somestate }); }; render() { ...

Both of the radio buttons in Material-UI have been selected

I have a unique document that showcases an implementation of RadioGroup, FormControlLabel, and FormControl. Take a look at the code snippet below for reference. import React from 'react'; import PropTypes from 'prop-types'; import Radio ...

How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...

Ways to adjust the number of columns in a div using Bootstrap for varying screen sizes of larger devices

I am new to coding and exploring html, css, and bootstrap. Is it possible to assign varying numbers of columns to a div based on different resolution ranges for larger devices? Specifically looking at the "lg" range which covers laptops and desktops with ...

The issue of undefined context in getStaticProps within Next.js

Has anyone encountered the issue where the context from getStaticProps is returning as undefined? Upon logging the context, I am receiving: { locales: undefined, locale: undefined } I require the information from the URL, but when attempting the same with ...

What is the best method for passing page props in Next.JS?

One example is using the React Context API to pass props from the _app file to pages. Another scenario involves refactoring a ReactJS routing, where state is passed from app.js to pages through the route definition as shown below: <Route><Compon ...