ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• March 24, 2016 at 5:12 pm #257759
  3lias

  Member

  Post count: 128

  How do I get a “smooth-scroll-link” class into an navigation link? Putting the class into the optional menu CSS class does not work as the class will get assigned to the “li” element and not to the “a” tag.

  Current:
  <li class="menu-item-578 nav-download-link menu-item menu-item-type-custom menu-item-object-custom current-menu-item"><a title="Foo" href="http://foo.com/subpage/#download">Download<span class="nav-line"></span></a></li>

  Wanted:
  <li class="menu-item-578 nav-download-link menu-item menu-item-type-custom menu-item-object-custom current-menu-item"><a title="Foo" href="http://foo.com/subpage/#download">Download<span class="nav-line smooth-scroll-link"></span></a></li>

  March 28, 2016 at 1:53 pm #258178
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please paste this code at Admin > Theme Options > Custom CSS > Custom JS.

  
  <script>
  jQuery('li.smooth-scroll-link a').on('click', function(e) {
  				
  				var linkHref = jQuery(this).attr('href');
  								
  				if (linkHref.indexOf('#') === 0) {
  					var spacerHeight = jQuery(linkHref).height(),
  						headerHeight = 0;
  						
  					if (jQuery('.sticky-header').length > 0) {
  						headerHeight = jQuery('.sticky-header').height();
  					}
  					if (jQuery('#wpadminbar').length > 0) {
  						headerHeight = headerHeight + 28;
  					}
  					
  					jQuery('html, body').stop().animate({
  						scrollTop: jQuery(linkHref).offset().top + spacerHeight - headerHeight - 10
  					}, 1000, 'easeInOutExpo');
  					
  					e.preventDefault();
  					
  				} else {
  					return e;
  				}
  </script>

  Thanks
  Mohammad

  March 30, 2016 at 8:08 am #258629
  3lias

  Member

  Post count: 128

  Unfortunately your code seems not to work for some reasons. To have a smooth scroll I think the link needs the “smooth-scroll-link” class or am I wrong?

  Like: <a title="Foo" href="http://foo.com/subpage/#download" class="smooth-scroll-link">Download</a>

  March 30, 2016 at 8:19 am #258631
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please provide me specific page url with issue.
  Thanks
  Mohammad

  March 30, 2016 at 1:06 pm #258755
  3lias

  Member

  Post count: 128

  At the moment the page is only locally accessible. When up and running I’ll give an update of the url.

  March 30, 2016 at 1:28 pm #258767
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Sure, i will wait for it 🙂 .
  Thanks
  Mohammad

  November 7, 2016 at 1:56 pm #300795
  3lias

  Member

  Post count: 128

  I’ve found another solution or rather not use this feature anymore at the site. This issue can be closed 🙂

  November 7, 2016 at 2:25 pm #300811
  David Martin – Support

  Moderator

  Post count: 20834

  Simply change your menu item link to #download and not a full URL.

  You can set different menu’s for certain pages.

  Thanks

  November 22, 2016 at 6:40 pm #303066
  3lias

  Member

  Post count: 128

  Thanks for your help David. This ticket can be closed. 🙂

  November 22, 2016 at 6:44 pm #303070
  David Martin – Support

  Moderator

  Post count: 20834

  Marking as resolved.

  Thanks.

• Back to forum

  Posted in: Dante