Return to previous page

How to remove scrolling bar appearing on the bottom of a static block?

This topic has 11 replies, 3 voices, and was last updated 1 years, 11 months ago ago by PR

  • Avatar: PR
    PR
    Participant
    May 30, 2023 at 06:38

    Hello,

    I was given custom code to add a scroll bar (to go up and down) on the mega menu (static block) and it works perfectly as needed.

    However there is a scrolling bar (left to right side) also appearing.
    How can we remove the bar showing on the bottom? (right to left)?

    We have added the details on the PCA.

    Thanks!

    Please, contact administrator
    for this information.
    #358038 Copied Theme version: 9.1.5
    10 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 30, 2023 at 08:18

    Hello, PR,

    We have conducted an inspection of your website and have not identified any issues. There is no scrolling bar appearing on either the left or right side, or on the bottom.

    We have recorded a video for your reference, which can be found in the private content area.

    We hope this information is helpful.

    Best Regards,
    8Theme’s Team

    Please contact administrator
    for this information.
    #358069 Copied
    Avatar: PR
    PR
    Participant
    May 30, 2023 at 08:59

    Hello Tony,

    thanks for the video!

    However we noticed when we view the website from a larger screen, when we hover over the words food, the static block (mega menu) the menu size changes and it adds the bottom scroller.

    Also if we change the size of the website from the computer,
    it changes the size etc. Is this normal?

    We are building the static blocks in accordance to a laptop size of 15.6″ as this is the most common etc.

    Thanks for your insight.

    #358083 Copied
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 31, 2023 at 07:09

    Hello @PR,

    We understand that you have a query regarding the content of a static block. We would like to explain that the scroll to the right appears on specific screen resolutions so that customers can scroll and view the content which is hidden on the right side. Removing the scroll to the right will not allow customers to scroll and the content will be cut off. Therefore, we suggest not to remove the scroller.

    However, if you still wish to try, you can use the following CSS code to remove the scroll to the bottom.

    .et_b_header-menu:not(.header-secondary-menu) li:hover>.nav-sublist-dropdown:not(.nav-sublist) {
    overflow-x: hidden !important;
}

    We hope this information is helpful.

    Best Regards,
    8Theme’s Team

    #358243 Copied
    Avatar: PR
    PR
    Participant
    June 23, 2023 at 22:49

    Hello Tony,

    thanks for this explanation!

    However we have one question if you don’t mind;

    1) we have the size set to container width; 1600 px.
    When we view it from different computer sizes (from small to large) it looks different on all screens. it looks fine on a laptop which screen size is 15.6″ I believe.

    We have added a domain on the PCA, the mega menu on that website appears the same on all screen sizes (from a small laptop to a 43″ screen)

    Is there anything we can do to make it the same? in terms of appearing the same thing on all screen sizes?

    Please contact administrator
    for this information.
    #360164 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 26, 2023 at 15:18

    Hello,

    Thank you for your response.

    Please try to activate Full width for menu https://prnt.sc/W_Mwmze8B3YP

    Best Regards,
    8Theme’s Team

    #360330 Copied
    Avatar: PR
    PR
    Participant
    June 27, 2023 at 23:50

    Hi Rose,

    thanks for the tip!
    Is there anyway to remove the scroll bar which randomly shows at the bottom?

    We have set the size to 1400px as the container width.

    Thanks for your help ??

    #360464 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 28, 2023 at 10:35

    Hello,

    Could you provide a screenshot for a better understanding of what exactly scroll bar you want to remove?

    Best Regards,
    8Theme’s Team

    #360548 Copied
    Avatar: PR
    PR
    Participant
    June 28, 2023 at 20:56

    Hello Rose,

    how can we include a screenshot on here?

    basically when you hover over the words “food”
    the mega menu opens but there is a scroll bar on the bottom side which we are not sure why/how it gets there.
    domain is on the PCA 🙂

    thanks for your help! ??

    Please contact administrator
    for this information.
    #360602 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 29, 2023 at 08:43

    Hello,

    Please check the content of static block > settings of every section, and disable the stretch option https://prnt.sc/xZzJgd814wF7 . Or use the next custom CSS code:

    .menu-static-block .elementor-section {
    max-width: 1440px;
}

    Best Regards,
    8Theme’s Team

    #360653 Copied
    Avatar: PR
    PR
    Participant
    June 29, 2023 at 23:08

    Thanks Rose,

    Works perfectly when we remove the stretch sections!
    Will keep the code in mind just as a backup ??

    #360744 Copied
  • Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘How to remove scrolling bar appearing on the bottom of a static block?’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Headphone Store – WordPress WooCommerce Theme
lazy-placeholder
Skate – WooCommerce Theme
lazy-placeholder
Royal – WooCommerce WordPress Theme
lazy-placeholder
Ecotransport Store – WordPress WooCommerce Theme
lazy-placeholder
Organic Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Restaurant – WordPress WooCommerce Theme
lazy-placeholder
Minimal Store – WordPress WooCommerce Theme
lazy-placeholder
Church – WordPress Theme
lazy-placeholder
Hipster Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.