Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Sticky Nav and One Page # links overlap

sticky nav one page
    • 9 years, 8 months ago anshuarya
      Participant

      Expired

      I have enabled sticky nav (with a 60px height) and I have a menu that has links to sections of the page, e.g. “about-us/#team”.  The issue is, when a user clicks the link the row with the #team id tag has its top 60px covered by the sticky nav!

      Is there a better solution to this besides creating an empty space of 60px above my row? — that changes the entire page layout.

    • 9 years, 8 months ago anshuarya
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      I don’t see that happening, screenshot. Did you manage to fix it?

      Best regards!

    • 9 years, 8 months ago anshuarya
      Participant

      Expired

      Currently I have a 60px Empty Space above the row that has the ID tag.  This is not a good solution because it creates a lot of empty space and changes the layout of the page.

    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      Please go to the Row Settings > Padding Top, set it 40. This will give the necessary distance from sticker menu.

      Best regards!

    • 9 years, 8 months ago anshuarya
      Participant

      Expired

      That still results in extra space being added so that Sticky Nav will not overlap text.  Is there a solution where the Sticky Nav will move to the correct location without my layout being impacted?

      Can Sticky Nav not work with One-page designs?

    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      Sticky navigation has no issue with either normal site nor one-page site. make sure you have enabled ‘Smooth scroll’ in General Options > Smooth Scroll.
      -Please go to file js/jquery.onepage.js and find these lines:

      scrollTo: function(target, callback) {
      			var offset = $(target).offset().top;
      			$('html, body').animate({
      				scrollTop: topposition
      			}, this.config.scrollSpeed, this.config.easing, callback);
      		},

      Replace with these:

      scrollTo: function(target, callback) {
      			var offset = $(target).offset().top;
      			var topposition = offset - 70;
      			$('html, body').animate({
      				scrollTop: topposition
      			}, this.config.scrollSpeed, this.config.easing, callback);
      		},

      Let us know.

      Best regards!

    • 8 years, 10 months ago Boekenbalie
      Participant

      Expired

      Thanks!!

    • 7 years, 1 month ago hoehfy
      Participant

      Expired

      Hello everyone,

       

      unfortunately this is not working for as it seems.

      I have enabled Smootscroll and Stiky Nav too.

       

      Does that work for normal anker links or just if you enable function ‘Use menu as one page menu’ on the page itself?

       

      Thank you

    • 7 years, 1 month ago Mirela
      Participant

      Hello,


      @hoehfy
      , can you please be more precise? What is not working for you? The padding at the top, or the one page menu links?
      If you are using links to homepage sections, then yes! You have to enable the “Use menu as one page menu” as well.

      Best regards!

    • 7 years, 1 month ago hoehfy
      Participant

      Expired

      Hi Mihaila,

      sorry for being not precise enough.

       

      My problem is that all anchor links of the website jump too far as the Sticky Nav is covering the actual beginning of the section where an anchor link is supposed to jump to.

      So what I would like to have is the adjustment like described above in the onepage.js file but when I do so there is no difference. As soon as I deactivate the Sticky Nav everything is working properly.

       

      Best regards!

       

       

    • 7 years, 1 month ago Mirela
      Participant

      Hello,

      That’s because the link to the section will place the top-left corner of that section to the very top-left corner of the browser’s window. Sticky navigation scrolls from that top position-> down.
      I suggest you change the top position value in the code above. Find this line:
      var topposition = offset - 70;
      Change the value [-70] until you are satisfied with the result.

      Best regards!

    • 7 years, 1 month ago hoehfy
      Participant

      Expired

      Hi Mihalia,

       

      I already did but id is not moving at all.

      Even if I change it to

      var topposition = offset – 700;

      it still looks the same as before.

      • This reply was modified 7 years, 1 month ago by hoehfy.
    • 7 years, 1 month ago Mirela
      Participant

      Hello,

      Please add some valid wp credentials in your profile data. So we can check it closely.
      Read this article for more information.

      Best regards!

    • 7 years, 1 month ago hoehfy
      Participant

      Expired

      Hello Mihalia,

       

      done. Thank you very much.

      Best regards.

    • 7 years, 1 month ago Mirela
      Participant

      Hello,

      I made the changes, but i see you do not have a one-page layout set up at the moment. All the menu items link to external pages.
      Let me know what can we help you with.

      Best regards!

    • 6 years, 12 months ago hoehfy
      Participant

      Expired

      Hi Mihaila,

       

      that’s right, it is a link to an other page. Nevertheless I refer a clear #tag so it should know where to jump to, but its not working properly.

      Thats the problem =(

Viewing 16 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password