This topic has 11 replies, 3 voices, and was last updated 10 months, 1 weeks ago ago by PR
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!
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
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.
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
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?
Hello,
Thank you for your response.
Please try to activate Full width for menu https://prnt.sc/W_Mwmze8B3YP
Best Regards,
8Theme’s Team
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 🙏🏻
Hello,
Could you provide a screenshot for a better understanding of what exactly scroll bar you want to remove?
Best Regards,
8Theme’s Team
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! 🙏🏻
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
Thanks Rose,
Works perfectly when we remove the stretch sections!
Will keep the code in mind just as a backup 🙏🏻
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