I have created a hidden-fixed section (activated by the hamburger module) to work as a side menu. When i scroll down the menu section, the page in the background also scrolls down.
How can we lock the background page from scrolling when we scroll down in the menu section?
I've installed a plugin called Insert Headers and Footers, then I've added the following script to it, you can view it by going to Dashboard > Settings > Insert Headers and Footers.
<script>
jQuery(document).on('ready', function () {
var $ = jQuery;
$(".a-hamburger").click(function(e){
$("body").toggleClass("fixed-position");
});
$(".a-close-button").click(function(e){
$("body").removeClass("fixed-position");
});
});
</script>
I've added also this code at Appearance > Customize > Additional CSS.
Now, if you click at the hamburger menu, the side menu scrolls ok, background doesn't (ok).
But when you close the menu, the background page never becomes active again no-matter how many times you repeat the steps. You eventually have to refresh the page.
I've edited that header template, I've removed the 150px padding at the top of the column you've added, and I have added a Spacer element on that column to generate that padding, and also I've added a CSS class to that spacer.
I've placed that spacer on the exact place where's the "X" button, and then via the following code I've made that when you click on the spacer, the nav menu will close and the fixed background will be removed.
<script>
jQuery(document).on('ready', function () {
var $ = jQuery;
$(".a-hamburger").click(function (){
$("body").addClass("fixed-position");
});
$(".remove-fixed-class").click(function (){
$("body").removeClass("fixed-position");
$("nav").removeClass("active");
});
});
</script>
It also needed some CSS code to be added, so there's the CSS that I've added at Appearance > Customize > Additional CSS.
I am very sorry for the late reply, we were not working on the weekend.
I've checked it and it seems to be alright with the full-width section, but just to make sure, I've customized that as I've done for the other header template, by adding a spacer element on the plase where's the close button, and then give a class to that spacer.
I saw that you've commented out a part of the code that I've added at Appearance > Customize > Additional CSS, so now I've updated it and everything is working alright.
I have created a hidden-fixed section (activated by the hamburger module) to work as a side menu. When i scroll down the menu section, the page in the background also scrolls down.
How can we lock the background page from scrolling when we scroll down in the menu section?
Thank you
Hi,
Can you please provide me with your wp-admin, I will have a quick look to see what's going on, make sure to click on private reply.
Feel free to ask for anything you need.
Kind Regards
Hi,
I've installed a plugin called Insert Headers and Footers, then I've added the following script to it, you can view it by going to Dashboard > Settings > Insert Headers and Footers.
<script> jQuery(document).on('ready', function () { var $ = jQuery; $(".a-hamburger").click(function(e){ $("body").toggleClass("fixed-position"); }); $(".a-close-button").click(function(e){ $("body").removeClass("fixed-position"); }); }); </script>I've added also this code at Appearance > Customize > Additional CSS.
.fixed-position { position: fixed !important; width: 100% !important; }Feel free to ask for anything you need.
Kind Regards
Hi,
Thank you for the script.
However there seems to be some kind of a glitch.
When i test it (sequenced steps following):
1. Load page - page scrolls
2. Open side menu - Menu area scrolls, background page locked from scrolling (Great up to here!)
3. Close side menu - page still locked from scrolling!
4. Open side menu for second time - Menu area scrolls, background page also scrolls!
5. Close side menu for second time - Background page scrolls as supposed to.
And so forth, these results repeat themselves by the same sequence as many times as you continue to follow the procedure.
Hi,
I am very sorry for the late reply, we were not working on the weekend.
I've updated the code that I've added before, so can you please take a look at it.
Feel free to ask for anything you need.
Kind Regards
Hi,
No, sorry to say but it doesn't work either.
Did you check it?
Now, if you click at the hamburger menu, the side menu scrolls ok, background doesn't (ok).
But when you close the menu, the background page never becomes active again no-matter how many times you repeat the steps. You eventually have to refresh the page.
Hi,
I've updated the code once again, also I've added some other code at Appearance > Customize > Additional CSS.
So can you please go and check it.
Feel free to ask for anything you need.
Kind Regards
Hi,
Now lock scroll works great!
But....
When i click at a menu item like "Collections" or "Projects", the side menu area closes! As if i clicked the close button.
https://new.kachramanoglou.gr/collections/the-starry-night-2/
Hi,
Sorry for the late reply,
I was able to fix this, so here's what I've done,
I've edited that header template, I've removed the 150px padding at the top of the column you've added, and I have added a Spacer element on that column to generate that padding, and also I've added a CSS class to that spacer.
I've placed that spacer on the exact place where's the "X" button, and then via the following code I've made that when you click on the spacer, the nav menu will close and the fixed background will be removed.
<script> jQuery(document).on('ready', function () { var $ = jQuery; $(".a-hamburger").click(function (){ $("body").addClass("fixed-position"); }); $(".remove-fixed-class").click(function (){ $("body").removeClass("fixed-position"); $("nav").removeClass("active"); }); }); </script>It also needed some CSS code to be added, so there's the CSS that I've added at Appearance > Customize > Additional CSS.
.fixed-position { position: fixed !important; width: 100% !important; } .a-close-button { pointer-events: none !important; cursor: pointer !important; }If you could take a look at it and tell me if everything is alright?
Feel free to ask for anything you need.
Kind Regards
Hi,
Now it works!
Thanx!
You are welcome anytime, feel free to ask for anything you need
If you like our theme, please leave us a rate of 5 stars at ThemeForest, that would help us a lot.
Kind Regards,
NeuronThemes
Hi,
I am afraid i have to bother you again with the scrolling issue.
Check this page
https://new.kachramanoglou.gr/demo/
when i click the close button the scrolling of the page is not activated.
I disabled the "pointer-events: none !important;" so that the close button works - even with that scrolling didn't work ether.
Moreover is it possible to have the fixed section slide in, instead of fade in.
Thanks again for your great support!
Hi,
I am very sorry for the late reply, we were not working on the weekend.
I've checked it and it seems to be alright with the full-width section, but just to make sure, I've customized that as I've done for the other header template, by adding a spacer element on the plase where's the close button, and then give a class to that spacer.
Feel free to ask for anything you need.
Kind Regards
Hi,
Did you check scrolling the page after closing the menu section?
It doesn't work.
Regarding the slide in option?
Thank you.
Hi,
I saw that you've commented out a part of the code that I've added at Appearance > Customize > Additional CSS, so now I've updated it and everything is working alright.
- https://prnt.sc/10z4bbw
Feel free to ask for anything you need.
Kind Regards
Hi,
Thank you.
Working now, although not a responsive method...
Regarding the slide in option? is it possible
Hi,
Never mind about the slide in, found it.
Thank you.
Glad to know
If you like our theme, please leave us a rate of 5 stars at ThemeForest, that would help us a lot.
Kind Regards,
NeuronThemes