Show menu when scrolled down

Okay, thanks anyway.

Do you know where i would need to had the javascript to get this working? Is you plugin ran by javascript files i need to change or can i do this through a javascript editor plugin?

Thanks.

Hi,

Thanks for the info, I will have a google and look into it. I’m the web developer just creating a new site for my mums business, I know how to write CSS and edit it quite a bit just not done JavaScript so I will look into later.

Thanks

Okay, thanks for the help, will probably be back later ahaha

H Peter

So ive had a look and managed to hide the nav container box by adding

.responsive-menu-button {
visibility: hidden
}

into my additional CSS in wordpress. I have also got a JS script loaded into wordpress with a test script on there. I have a feeling i need to try and change the root CSS file where i can add this visibility value into so i can dictate what to do with the CSS from JavaScript but i cant find the exact file that makes the changes on the front end of the website anywhere in the plugins folder for responsive menu?

From reading online is looks like i need something like this…

$(“#divname”).hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(“#divname”).fadeIn(“slow”);
}
else {
$(“#divname”).fadeOut(“fast”);
}
});

but i see the when i inspect the page with the plugin this is is a BUTTON and not a DIV so what would i do here? Can i reference the DIV below or what is it i use to dictate the changes?

Am i able to have the CSS in my themes additional CSS section and still use java script to have it unhide on scroll or so i need the CSS somewhere else?

Ive got a bit stuck here after a while of figuring out how to add scripts etc so any help or pointers would be great help 🙂

Thanks,

Harvey

Okay that clears things up for me.

Im still struggling to get things working though with this.

$(“#responsive-menu-button”).hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(“#responsive-menu-button”).fadeIn(“fast”);
}
else {
$(“#responsive-menu-button”).fadeOut(“fast”);
}
});

Yes i am wanting this to only show when i scroll down and i am going to try and learn more as it is something i am interested in. Anyway its 2.00 in the morning here so i best get some rest. I will have a look tomorrow at some point and let you know if i get anywhere.

Thanks,

Harvey

No its on my local site at the moment.

I will set it all up tonight on my test site that is online, its less developed then my current local site but that shouldn’t be an issue. It will take me around 20 mins to setup later this afternoon when i finish work so i will send you the link then.

I will also have a read today and look into how to get the most out of the inspect development tools in chrome, how can you see the javascript code within chromes inspect tool?

Thanks,

Harvey

Sorry for all the posts,

just got this working by using this code and adding it into the code snippet in development tools but i am wanting the button to fade. Any ideas where i would add the fade function in this code? Then i just need to add this into my JS file hopefully

myID = document.getElementById("responsive-menu-button");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 200) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);

Thanks