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.cs-cart.com/add-ons/customer-experience/hamburger-menu.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.
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.
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.cs-cart.com/add-ons/customer-experience/hamburger-menu.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.com/forums/topic/setting-a-div-height-to-the-window-viewport-size/