Help needed with Wordpress: How to resolve double vertical scrollbars issue on parallax scrolling pages

I am new to coding and have been struggling with a particular issue for quite some time. I am using the Parallax Scroll plugin found here: https://wordpress.org/support/plugin/adamrob-parallax-scroll

On my website (), when using the Customizr theme, two vertical scrollbars are appearing.

The main scrollbar only appears near the header while scrolling. Despite setting all overflow-y's to hidden, I cannot seem to identify the source of this issue either online or in the code itself.

Could someone please advise on how to eliminate the extra scrollbar? Thank you.

htmlcsswordpressscrollbarparallax

Answer №1

Eliminating the following code snippet:

@media (min-width: 768px) {
  .page-template-full-width-php #main-wrapper {
    overflow-x: hidden;
  }
}

... will result in the removal of the internal scrollbar. Additionally, it is advisable to remove it for other media queries as well.

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

Expanding the width of the textfield is not possible in CSS styling

My current search bar design features an input area that does not match my expectations. The input length is restricted and starts from the center rather than the black border I had envisioned. If you'd like to see the code and design in action, chec ...

cssreactjsmaterial-ui

Creating dynamic HTML elements using ngFor within AngularJS allows for increased flexibility and customization on the

I'm a newcomer to Angular 5 and I'm looking to retrieve HTML elements from a .ts file and dynamically add them to an HTML file using ngFor. I attempted to use [innerHtml] for this purpose, but it was not successful and returned [object HTMLSelect ...

htmlangularngfor

When the user clicks on an organizational chart, a new organizational chart will appear in a modal popup

Currently, I am developing a project with Highcharts where I have a specific requirement to display a modal popup when a node on an org chart is clicked. The popup should also contain another org chart. Below is the code snippet I am working with: [link to ...

javascripthtmljqueryhighchartsorgchart

The alignment of elements in the div seems to be slightly skewed

Currently, I am in the process of creating a website with the temporary name yeet.io. I am facing an issue where I am attempting to center both an input and h1 element inside a div vertically and horizontally, but they keep appearing misaligned for some r ...

javascriptjqueryhtmlcss

Issue with dropdown menu appearing beneath specific elements in Internet Explorer versions 7 and 8

I've been encountering some troublesome issues with a website I'm working on, specifically in Internet Explorer 7/8. On certain pages, the navigation elements are getting hidden below text and images, causing confusion for me. I've attempted ...

css

Discrepancy in inner div presentation between Internet Explorer and Chrome

In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...

htmlcssinternet-explorergoogle-chrome

Initial space in model variable not being displayed

Hey there, I am working with a model variable called "name" that is linked to a span element like this: <input type="text" ng-model="name"> <span ng-bind="name"></span> My goal is to display the text entered in the input field without r ...

htmlangularjscss

Tips for concealing the preceding list item using jQuery

I am currently working on a project that involves a ul tag with 5 li items. My goal is to display each item one by one when a button is clicked. This would mean showing the next item and hiding the previous one, similar to what happens in quizzes. Here i ...

javascriptjqueryhtmlcss

Difficulty in centering two equal-sized columns in a Bootstrap 3 row with an offset

Here is a link to my demonstration on JSFiddle: https://jsfiddle.net/nbd2w3zb/ I am working with Bootstrap 3 and have created 2 equal-sized columns (.col-md-4) within a .row. The desired effect is to center both of these columns inside the .row, ensuring ...

htmlcsstwitter-bootstrap

How to customize the background-color of buttons in React JS using className in react-bootstrap PopOver

I am currently working on a React JS component that includes multiple buttons, each of which triggers a different popover or tooltip message. I am trying to assign unique background colors to each popover title. I have added the styling for these colors in ...

cssreactjstwitter-bootstrap

Expanding Div Heights that Adjust to the Browser's Width

Looking to set up a responsive height for a div, almost there but facing some distortion when resizing the browser. Here is the fiddle file for reference: https://jsfiddle.net/td5n8ky9/10/ The issue lies in the bottom 2 divs - aiming for a grey bar the wi ...

htmlcssresponsive-design

Creating a div anchor tag within a component in React

Forgive me if this question has already made its rounds on the internet, but I can't seem to get anything to work in my favor. I was under the assumption that all you had to do was append the # + div id at the end of a URL to navigate to a specific d ...

javascripthtmlreactjs

Difficulty encountered when applying a CSS class with JavaScript

The Javascript function I am currently using is able to select multiple links. This behavior occurs because of the Regular expression I applied with the '^' symbol. I decided to use this approach because my links are in the following format: htt ...

javascriptjqueryhtml

jQuery Slider not appearing on the page

I am attempting to incorporate the Basic jQuery Slider into my website. Below is the code I have used: For HTML file: <div id="slides"> <ul class="bjqs"> <li><a href="somelink"><img src="someim ...

javascriptjqueryhtmlcss

Setting the height of a div using CSS and navigating between views using Angular UI

Issue One: When moving one square, the border should appear and the menu should cover the entire height. I've already spent 2 hours trying to fix this, but it still doesn't fill the whole height or center vertically. Problem Two: If you make the ...

htmlcssangularjs

Can an FAQ accordion collapse the selected element when another element is clicked?

I recently started working on a FAQ accordion project from frontendmentor. The functionality works perfectly when clicking on a question to reveal the answer and clicking again to hide it. However, I am facing an issue where if I click on one question and ...

javascripthtmlcss

Maintaining consistent margins on both the left and right sides can be achieved easily using TailwindCSS

I have been trying to figure out how to center a fixed element on my screen, but all the solutions I've found so far are not working for me. Originally, I tried fixing my div in the center of the screen using `mx-[40%] mt-[10%]', but it only look ...

htmlcssreactjsnext.jstailwind-css

Is there a way to retrieve a value from localStorage and use it to automatically set the selected option in a UL-based dropdown list upon page load

I have implemented a unique UL-based dropdown list that I discovered here (specifically the third model) as the foundation for a role-based selection box for my users. To enhance user experience, I am storing their role selection in localStorage so they do ...

javascriptjqueryhtmllocal-storage

Are there any great C# applications built on asp.net?

Seeking recommendations for quality open source ASP.NET (C#) applications that align with the following criteria: Well-designed and structured with multiple tiers Clean, well-commented codebase Incorporates various design patterns effectively Web pages ...

c#asp.netcssdesign-patterns

How do I create a Bootstrap 4 multi-level navigation bar that drops to the right on the third level?

clickable dropdown hover dropdown.jpg Source: Is there a way to create a dropdown menu that opens to the right like the clickable version, rather than to the left like the hover dropdown in the provided example? I'm open to other solutions as long ...

htmlcssdrop-down-menuhoverbootstrap-4