Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Disabling Body Scroll On Menu Overlay Or Modal Rate Topic   - - - - -

 
  • bpdigital
  • Newbie
  • Trial users
  • Join Date: 06-Jun 17
  • 1 posts

Posted 06 June 2017 - 05:16 PM #1

Hello and good afternoon!

 

I am fairly new to the CS-Cart platform and find it relatively easy to work with, however, I am having an issue that is stumping me.

 

We are working on a website that uses hamburger navigation rather than a traditional menu (we are using the plugin provided by the cs-cart developers for this: http://marketplace.c...enu.html?sl=en)

The issue we are having (which is also apparent on their demo site) is that the page will still scroll when the menu us open. 

 

We have made many attempts to disable the BODY scroll while the CSS class for the menu overlay (or even just the menu itself) is active. We have done this using jquery & CSS.

 

The issue is that even when setting the body overflow to hidden (through the custom CSS section) this will not even apply to the site - before using the jquery to switch / add the css class.

 

Has anyone had this issue before or come up with a solution? Is there a reason why the normal method of .body{ overflow: hidden;) will not work?

 

Any help would be greatly appreciated, the demo site can be seen at: http://cs-cart.bluepointdigital.comfor reference.

 

Lastly, the solution we are working toward will also have the same effect when someone clicks on "my account" or on "shopping cart" as we have used CSS to make a similar-style sidebar for these items.

 

Thank you for all your help and I look forward to any replies.



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19976 posts

Posted 07 June 2017 - 08:16 AM #2

We can offer you to add additional changes to the module. Add javascript code, which will add the overflow: hidden property to the body tag when the menu is open and remove it when the menu is closed.


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • poppedweb
  • Authorized Reseller
  • Members
  • Join Date: 02-Aug 16
  • 553 posts

Posted 07 June 2017 - 07:00 PM #3

Hello and good afternoon!

 

I am fairly new to the CS-Cart platform and find it relatively easy to work with, however, I am having an issue that is stumping me.

 

We are working on a website that uses hamburger navigation rather than a traditional menu (we are using the plugin provided by the cs-cart developers for this: http://marketplace.c...enu.html?sl=en)

The issue we are having (which is also apparent on their demo site) is that the page will still scroll when the menu us open. 

 

We have made many attempts to disable the BODY scroll while the CSS class for the menu overlay (or even just the menu itself) is active. We have done this using jquery & CSS.

 

The issue is that even when setting the body overflow to hidden (through the custom CSS section) this will not even apply to the site - before using the jquery to switch / add the css class.

 

Has anyone had this issue before or come up with a solution? Is there a reason why the normal method of .body{ overflow: hidden;) will not work?

 

Any help would be greatly appreciated, the demo site can be seen at: http://cs-cart.bluepointdigital.comfor reference.

 

Lastly, the solution we are working toward will also have the same effect when someone clicks on "my account" or on "shopping cart" as we have used CSS to make a similar-style sidebar for these items.

 

Thank you for all your help and I look forward to any replies.

 

The reason that this is not working is because you have not set a height. You would need to add a piece of javascript code that would automatically detect the height of the client and set the height of your body to the client ones.

 

Take a look at this article for more information https://css-tricks.c...viewport-size/ 


PoppedWeb | sales@poppedweb.com | https://poppedweb.com
TurnKey Website Design | Add-Ons | Performance Audits | Dedicated Server Management
24/7 Support | Response within an hour (during working hours).