Can I add Parallax scrolling on Home button?

Hello,

I have two menu customization I need help with:

-While on the home page, how can I make my main menu Home button scroll/slide to top rather than jump back? I know that I need the Element ID, but I’m not sure what id to use for this. I’d assume that it’s the same address that the “return to top” little arrow on the lower right of page uses.

-Of my 8 main menu items, I would like the first three (Home, About, DJs) to parallax scroll, but this clearly won’t work when not on my home page. How can I hide these three menu buttons on subsequent pages and replace them with three non-scrolling menu buttons? The opposite would need to happen on the home page as well: the three scrolling buttons would need to appear, while the non-scrolling buttons would need to be hidden.

Site is www.kulchalatino.com

Thanks!

I still need help with the first question, but I was able to answer my second question referencing this post:

Thanks

Sorry, and I’m gonna add one more question: The Social buttons on my individual staff modules do not work, nor the email link. They just open new tabs with “myurl.com/__” as the address. Am I overlooking something?

Thanks!

Hello there,

Regarding your first question, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided Scripts in footer box
<script>
jQuery(function($) {

  var homeMenu = $( ".menu a:contains('HOME')" );
  var homeMenuURL = homeMenu.attr('href');
  
  homeMenu.attr('href', homeMenuURL+'/#page');

});
</script>
  1. Save settings

> The Social buttons on my individual staff modules do not work, nor the email link. They just open new tabs with “myurl.com/__” as the address. Am I overlooking something?

For the social URLs, they must be preceded with http://. For instance, http://www.twitter.com/djrasrican.

For email, it must be preceded with mailto:. For instance, mailto:djrasrican@gmail.com.

Regards,
Kharis

Thank you so much, that was a big help. A couple more related questions:

Clicking CREW from any page other than the front page opens the section correctly, but loads it with the title cut off. Any way around this? Do I just need to adjust padding? Seems like there must be a better way to fix it.

Also, I’ve created the empty parent menu item CITIES to hold submenu pages OAKLAND and SAN DIEGO, but clicking CITIES from the lower sections of the front page causes the page to snap to top. Any way to make CITIES a truly dead link? I’d like to avoid any actions whatsoever when it is clicked.

Lastly, is there any way to add Instagram links to Staff social links?

Thanks! Great theme!

Hello there,

Clicking CREW from any page other than the front page opens the section correctly, but loads it with the title cut off. Any way around this? Do I just need to adjust padding? Seems like there must be a better way to fix it.

Yes, I thought you should add more padding. Try to apply the following:

#crew{
  padding-top: 130px !important;
}
Any way to make CITIES a truly dead link? I’d like to avoid any actions whatsoever when it is clicked.

We can make to behave like so by using jQuery. Try to do the following steps:

  1. From your dashboard, go to Settings > Header and Footer Scripts > Scripts in footer

  2. Insert the following code immediately after this line homeMenu.attr('href', homeMenuURL+'/#page');

  $( ".menu a:contains('CITIES')" ).click(function(){
      return false;
  });

So it will look like this:

<script>
jQuery(function($) {

  var homeMenu = $( ".menu a:contains('HOME')" );
  var homeMenuURL = homeMenu.attr('href');
  
  homeMenu.attr('href', homeMenuURL+'/#page');

  $( ".menu a:contains('CITIES')" ).click(function(){
      return false;
  });

});
</script>
  1. Save settings

You would need to clear your browser’s cache before reloading your site.

Regards,
Kharis

Amazing, thank you!!!

What about my third question?

>Lastly, is there any way to add Instagram links to Staff social links?

Apologies, it isn’t supported by the theme’s core currently.

Regards,
Kharis

Ok thank you.

Shoot, I actually just realized that there’s still a glitch:

I’ve been able to hide the duplicate menu items from my computer, but when viewing my site on a mobile device the menu still shows all menu items. This means that there are 2 Homes, 2 Abouts, and 2 Crews. How can I hide them on mobile sites?

This is the code I’m using:

#menu-item-272,
#menu-item-273 {
display: none;
}

.home .page #menu-item-272,
.home .page #menu-item-273 {
display: inline;
}

Hello there,

Your site is currently being under construction mode. It prevents me to inspect it directly. Is there any way for me to access your site? Maybe you would give me an access to your admin area? If so, you could send the login credentials to my email at kharisblank @gmaildotcom, enclose the link to this thread.

Regards,
Kharis

I’m so sorry, I forgot to disable that. You can now see the site. Thanks

Hello there,

Try to remove them from the custom menu editor. I thought it is simpler. Go to Appearance > Menus > select your main menu > expand the respective menu item’s options > click “Remove”

Regards,
Kharis

But won’t this remove the menu item completely? I do not want this. I have 2 copies of each of the first 3 menu items so that they will parallax scroll when on the Home page, and function like regular menu links when on any other page.

Hello there,

You shouldn’t have a menu duplication. This URL will work http://kulchalatino.com/#crew on homepage and other pages.

Remove the menu item which its URL value is like this #crew.

Regards,
Kharis

OK I see, thank you.

And which Home menu item do I remove? I’m unclear.

Also, as the site sits now, when on the Home page all 3 sections on that page (Home, About, Crew) are highlighted in the Menu. How do I undo this?

Many thanks for the help and patience.

Hello there,

> And which Home menu item do I remove? I’m unclear.

Go to Appearance > Menus > edit your menu > then remove the second “Home” menu item.

To remove the highlight, apply the following custom CSS code:

#menu-item-35 > a,
#menu-item-147 > a,
#menu-item-148 > a{
  border: none;
}

Regards,
Kharis

Thanks, I deleted the second Home and now the menu looks good on mobile.

As for the highlighting though, adding that code removes the highlighting completely, which I do not want. I still want those menu items to highlight when they are chosen, I just don’t want all three to highlight at the same time. Is there a way to fix this?

Hey there. Actually, after following your advice now the functionality is pretty messed up. Clicking on ABOUT from an outside page (such as MUSIC) now brings you to a dead page. It seems that the way that I had it set up before was the best option. The only issue was the extra menu items showing up on the mobile site.

Please let me know what you think I should do. Thanks

Hello there,

Let me ask a thing. What do you mean by “dead page”?

Regards,
Kharis