This website uses cookies to personalise ads and to analyse traffic ok
web design

Page scroll to id for WordPress

 

Knowledge Base – FAQ

Topics: General WordPress Menu Links highlighting Links Targets Page scrolling Offset jQuery/Javascript

 

Pages: 1 2


745 Comments

Post a comment

Comments pages: 1 6 7 8

  1. Vijay
    Posted on February 25, 2021 at 06:19 Permalink

    Hello,

    The plugin looks great and useful.

    When I checked with “Prevent other scripts from handling plugin’s links (if possible)” this option, everything works fine with desktop devices. But in mobile view, the nav-toggle is not closing automatically when I click on a section. But when I unchecked the option in mobile devices its working fine. But in desktop by clicking on navigation, its coming from top on each time. not from previous section.

    Can you please explain me where is the issue and why it is happening?

    Thanks in advance.

    Reply
    • malihu
      Posted on February 25, 2021 at 17:10 Permalink

      Hi,

      This happens because a script in your theme handles page smooth scrolling and prevents “Page scroll to id” from doing its thing.

      When you enable the “Prevent other scripts from handling plugin’s links” option, it removes the js click events of the theme’s script, in order to enable “Page scroll to id” events to work.

      This however, also removes from the links the js click event that close the mobile menu.

      The solution is to keep “Prevent other scripts from handling plugin’s links” option enabled (otherwise “Page scroll to id” won’t work with your theme) and add an additional js script in your theme. The script to add is described here:

      http://manos.malihu.gr/how-to-close-mobile-menu-with-page-scroll-to-id/

      If you can add such script, let me know your site’s URL so I can check it and give you the code to add (the post above describes where to place the code).

      Let me know

      Reply
  2. Sascha
    Posted on February 17, 2021 at 09:49 Permalink

    Hi Malihu
    I love your plugin but i have a problem. With the new update from wordpress the anker dont work. sorry i’m not so good in html or css. maybe you can take a look to http://www.greencarrepair.ch who is the problem. thank you
    best regard
    sascha

    Reply
    • Sascha
      Posted on February 17, 2021 at 21:22 Permalink

      it works… in settings I press “reset to default” tadaaa it works

      Reply
  3. instapedia
    Posted on February 15, 2021 at 04:22 Permalink

    Hai,
    This plugin is great. Thank you so much.

    Reply
  4. Gordana
    Posted on December 22, 2020 at 23:23 Permalink

    Hi,
    I have a “УПИС” page that opens a dropdown menu when clicked, with the menu items that are anchor linked. This plugin works perfect when I click from any page but when I click from home page nothing happens.
    Also, dropdown menu items that are anchor linked and highlighted all the time. I don’t know how to make anchor links background in dropdown menu grey like they are inactive.
    Thank you.

    Reply
    • malihu
      Posted on December 23, 2020 at 01:35 Permalink

      Hi,

      Firstly, it seems that you need to remove the trailing slash in your menu links URL (the slash before the hash). For example, change your “Акредитовани програми” link URL from:

      https://kizdobranski.com/bk/?page_id=4748/#akreditacija

      to:

      https://kizdobranski.com/bk/?page_id=4748#akreditacija

      Do this for all the links in your dropdown.

      Second: The links don’t work from your homepage, because of this script:

      ...themes/Avada/includes/lib/assets/min/js/general/fusion-scroll-to-anchor.js

      Try this:

      Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. Save changes, test and let me know (we’ll see the highlight issue when everything works correctly).

      Reply
      • Gordana
        Posted on December 23, 2020 at 11:50 Permalink

        Hi Malihu,

        Thank you for quick answer.
        I tried before with removing slashes, then I can open those links from home page but have to click twice on link and they don’t work when I’m on that page “УПИС”, it works only when clicked from other pages.
        I have removed slashes from 3 first anchors in dropdown menu just to show you how it behave.

        “Prevent other scripts from handling plugin’s links” is already enabled.
        If you have any other idea I ‘ll be grateful…
        Tnx

        Reply
        • malihu
          Posted on December 23, 2020 at 17:29 Permalink

          Try deactivating “Page scroll to id” temporarily and see if your links work from the homepage and let me know.

          Reply
          • Gordana
            Posted on December 23, 2020 at 18:03 Permalink

            They doesn’t work, they behave just the same.

        • malihu
          Posted on December 24, 2020 at 02:24 Permalink

          This means that the problem comes from your Avada theme and it’s not something we can solve. You need to contact the theme developers and ask them for support.

          Reply
  5. Ben
    Posted on December 22, 2020 at 16:24 Permalink

    Hi,

    Great plugin with a lot of settings, nice work!
    I’m working with anchor links, starting from the menu. When you’re scrolling through the page, it works fine by clicking the section you want in the sticky header. But when you start at the top, in the ‘main menu’ the smooth scrolling stops too far to the bottom, so halfway the desired section. The custom offset or putting the #header.sticky there doesn’t seem to work either…

    What makes the difference between the perfectly working sticky menu en the main menu who pushes the scrolling the far?

    Ben

    Reply
    • malihu
      Posted on December 23, 2020 at 01:16 Permalink

      Hi,

      The difference in scrolling happens because your theme changes the page/document length the moment the menu becomes sticky (while scrolling down the page).

      When you’re at the top of the page, the menu height is greater than when you’ve scrolled down and the menu becomes sticky (the sticky menu is shorter). This means that every target below your header menu, has its position changed and this happens while the page is scrolling.

      Hope this makes sense as it’s a bit technical.

      The proper way to develop the menu would be to compensate for the height difference of your non-sticky to sticky menu. Since your theme does not do this, we need to do it ourselves by adding the following to your CSS:

      #rs-header .menu-sticky.sticky{ top: 0; } #rs-header .menu-sticky.sticky + *{ margin-top: 149px !important; }

      This will also fix the scrolling “glitch” when the menu becomes sticky, i.e. it’ll make the menu transition (from non-sticky to sticky and vice-versa) much smoother.

      Let me know

      Reply
      • Ben
        Posted on December 23, 2020 at 15:40 Permalink

        That fixed it right away! 🙂
        Thanks a lot, happy to send you a donation.

        Ben

        Reply
        • malihu
          Posted on December 23, 2020 at 17:19 Permalink

          Awesome. Thank you 🙂

          Reply
  6. Koen
    Posted on December 3, 2020 at 16:35 Permalink

    Hello,

    I just started with my website and try to use the page scroll to id to scroll on my homepage. The menu works for most of the links, only the “missie” one stopped working. Can’t figure out why. Besides the page is not really scrolling, but more jumping. It works fine, although scrolling would be nicer. Due to that I am new to building websites, I can’t figure out why it is doing that.

    But the main reason I am commenting is due to the offset. It is not doing how I want it. I want the page to stop just before the header on the top and I tried multiple things, but nothing is working. Even when I place a number manually in the offset part of the plugin, it will not stop. Could you please help me out?

    Thank you in advance.
    Koen

    Reply
    • malihu
      Posted on December 3, 2020 at 21:24 Permalink

      Hello,

      The selector you set in plugin is invalid. Go to “Page scroll to id” settings and set the “Selector(s)” option value to the default:

      a[href*='#']:not([href='#'])

      Save changes and let me know so I can check it again 🙂

      Reply
      • Koen
        Posted on December 8, 2020 at 11:39 Permalink

        Hello Malihu,

        I changed the selector to the value you said and saved the changes. Now the menu is referencing to the top of the page, so when you scroll down and click on the menu, it scrolls back up.

        Could you maybe have another look?

        Thanks in advance.

        Reply
      • Koen
        Posted on December 8, 2020 at 12:21 Permalink

        Hello Malihu,

        I changed the sector to the default value suggested. Now the menu is referencing to the top of the page, so when you scroll down and click on the menu, it scrolls back up. Could you maybe have another look at it?

        Thanks in advance.

        Koen

        Reply
        • malihu
          Posted on December 8, 2020 at 19:15 Permalink

          No problem 🙂

          It seems that your HTML document has an error.

          There’s invalid HTML code before the doctype. Your HTML document starts with a div element with id “wp-custom-header”. This code is before the <doctype> tag and is invalid (this is what causes the scrolling problem).

          Right now, your HTML is like this:

          <div id="wp-custom-header" class="wp-custom-header"> <!-- ...div content... --> </div> <!DOCTYPE html> <!-- ...html, head etc. -->

          It should be like this:

          <!DOCTYPE html> <!-- ...html, head etc. -->

          Nothing should exist before <!DOCTYPE html>

          Your wp-custom-header element should be inside the <body> tag.

          Hope this helps

          Reply
          • Koen
            Posted on December 9, 2020 at 00:10 Permalink

            Thank you so much, I would have never found this error myself. Now the scroll to page plugin is working as it should, really nice! Thanks for the help and the great plugin!

        • malihu
          Posted on December 9, 2020 at 20:02 Permalink

          Glad I helped 🙂

          Reply
  7. Paka
    Posted on December 1, 2020 at 23:53 Permalink

    Great plugin, but I can’t seem to get the active link to change color. Here’s my situation… I have a home page that has sections that are id with anchors that fall under a main menu called “Produce” and when I hover over the word “Produce” it opens a dropdown menu with the menu items that are anchor linked. What I’m trying to accomplish is to have the “Home” menu item to stay at the default unselected color (#388143) when someone selects one of the “Produce” subcategories. I also want the the selected link to be a slightly lighter color.

    What’s happening now is that every time I’m on the home page both the “Home” and “Produce” link colors show being active along with all the submenu items. When I select/click a submenu item nothing changes.

    I hope this makes sense! And I am using the Divi theme.

    Reply
    • malihu
      Posted on December 3, 2020 at 21:17 Permalink

      Hello,

      I deleted the previous reply you got here as it was just a spam comment that got through.

      I just checked your site and it seems that highlight is working as intented(?) Did you fix the issue or?

      Reply
      • Paka
        Posted on December 3, 2020 at 22:06 Permalink

        Hi Malihu! No, I just made the top level menu items all the same color regardless of selection status and on the dropdown I am still unable to get the text font color to change at all so I did the background option you detailed above.

        I think the client will be ok with this setup.

        Thanks for deleting that spam…. annoying!!!

        Reply
        • malihu
          Posted on December 3, 2020 at 22:17 Permalink

          The font color doesn’t change because the other css rules have the color value as “!important”. So you just need to set it as important too. For example:

          .mPS2id-highlight { background-color: rgba(56,129,67,0.5); border: 2px solid #388143; border-radius: 12px; color: red !important; /* change red to the color you want */ }

          Hope this helps

          Reply
          • Paka
            Posted on December 5, 2020 at 22:44 Permalink

            I’ll give it a shot! Many thanks and great plugin!

  8. John
    Posted on November 29, 2020 at 03:00 Permalink

    Hi,
    Sorry to bother you – I’m trying to save scroll-to-id’s settings for a new WordPress site, after pressing ‘save’ I’m getting a 403 error page with url ending with ‘options.php’. Is there any way to fix this?
    Thank you!

    Reply
    • malihu
      Posted on November 29, 2020 at 18:47 Permalink

      Hi,

      I haven’t experienced this issue before. Does this happens when you save other settings (like general settings)?

      Do you have any security plugin installed? Are you getting any console errors?

      Can you make sure sure the file permissions are correct (via FTP client)?

      Let me know

      Reply
  9. Rompi
    Posted on November 26, 2020 at 21:49 Permalink

    Hi, I just install your plugin on my site : <a href="https://rompicoffeetogo.com/&quot; and it is so good.

    I have a problem. When I use “#some-id” link format it works. But when I use “https://my-site.com/#some-id” or “/#some-id” link format all of the menu are highlighted. I realized it is because of the theme stylesheet, but I can’t figure out how to solve this.
    Could you give me solution about this?

    Thank you

    Reply
    • malihu
      Posted on November 27, 2020 at 22:42 Permalink

      Hi,

      Did you solve the highlight issue? I checked your page and current menu items do not get highlighted.

      Reply
      • Rompi
        Posted on November 28, 2020 at 17:00 Permalink

        Yes, I fixed that issue by adding this, but I don’t know whether this is the right solution or not.

        a._mPS2id-h{ color: #fff !important; } a._mPS2id-h:hover { color: #cf9e23 !important; } a.mPS2id-highlight{ color: #cf9e23 !important; }

        Now I have another problem. I use Elementor. I added [ps2id id=’some-id’/] on top part of section-5. I want the fourth menu (“PAKET KEMITRAAN”) stay highlighted until section-8.
        I enabled “Keep the current element highlighted until….” and “Highlight by next target” on my plugin setting. But the link only highlighted when section-5 appear or when I am scrolling through section-6 to section-8. When I stop scrolling between section-6 and section-8, the menu is not highlighted. It begin highlighted again when I start scrolling.

        Could you help me to solve this issue?

        Reply
        • malihu
          Posted on November 28, 2020 at 21:40 Permalink

          Your solution is fine.

          I’d suggest to disable the 2 options you enabled and instead of using [ps2id id='some-id'/] to create your targets, use Elementor’s CSS ID field as described here:

          http://manos.malihu.gr/page-scroll-to-id-elementor-guide/

          Hope this helps

          Reply
          • Rompi
            Posted on November 29, 2020 at 20:59 Permalink

            I did your suggestion and added CSS ID on section-5.
            But the menu only highlighted on section-5. I want the menu stay highlighted until section-8

        • malihu
          Posted on November 29, 2020 at 22:45 Permalink

          Ok, now enable “Keep the current element highlighted until….” and see if it does what you need.

          Otherwise, if you want “Cara Gabung” section to stay highlighted until the end of the page, you need to wrap the “Cara Gabung” section along with the ones below it, with a new section with id cara-gabung-rompi

          Reply
          • Rompi
            Posted on November 30, 2020 at 12:08 Permalink

            I’m sorry, I think I didn’t explain it very well to you.
            I want “Paket Kemitraan” menu stay highlighted from “Paket Silver” section to “Paket Entreprise” section.

            I added “paket-kemitraan” on “Paket Silver” section CSS ID and enabled “Keep the current element highlighted until…” on the plugin setting and still nothing happened

        • malihu
          Posted on November 30, 2020 at 22:15 Permalink

          OK. Now, in plugin settings, set the “Highlight selector(s)” option value to:

          #menu-main-menu .menu-item a

          Save changes and test.

          Reply
          • Rompi
            Posted on December 21, 2020 at 16:08 Permalink

            Sorry for late response. It works. Thank you very much for your help

  10. Danilo
    Posted on November 25, 2020 at 16:20 Permalink

    Greetings, Manolis.

    First of all thank you for providing this awesome plugin.

    However, I’ve been having a lot of trouble with highlighting just one anchor at a time. I’ve built the anchors applying anchors to each block/section in Gutenberg/Astra Pro and the scrolling is working fine.

    The highlight effect though is still applied to multiple menu items. No matter what I do it seems either the theme of the browser defaults are overriding the additional CSS:

    .memu-item a.mPS2id-highlight{ color: red; } .memu-item a.mPS2id-clicked{ color: blue; }

    Other details: selectors are a[href*=’#’]:not([href=’#’]), “Enable on WordPress Menu links” is checkeck, “Prevent other scripts from handling plugin’s links (if possible)” is checked.

    Would you kindly please help me fix it?

    Reply
    • malihu
      Posted on November 25, 2020 at 22:15 Permalink

      I can’t really help unless I see your page. Can you post your site/page url?

      Reply
      • Danilo
        Posted on November 27, 2020 at 21:37 Permalink

        OK, I’ve sent it privately.

        Reply
  11. Ian Randell
    Posted on November 25, 2020 at 14:04 Permalink

    Hi there,

    I have your plugin working perfectly on the website I am building and have used the offset to accommodate a sticky header. However, on one page I have an SVG image with links in it and I cannot get the smooth scroll to work. I am guessing it is to do with the xlink:href attribute. I tried to add this into the selectors but that didn’t work. I also tried the class ps2id but that didn’t work either.

    Is there any solution to this?

    Kind regards,

    Ian

    Reply
    • malihu
      Posted on November 25, 2020 at 22:13 Permalink

      Hello,

      The plugin requires an href attribute in order to work. This said, you can have anchor (<a />) elements (i.e. links) with href attribute inside SVG elements. For example:

      <svg width="..." height="..." xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a href="#my-section-id"> <rect height="..." width="..." y="..." x="..." rx="..."/> </a> </svg>

      Hope this helps

      Reply
  12. Tim
    Posted on November 22, 2020 at 15:51 Permalink

    Hello,
    I have installed Scroll-to-ID on my website at: https://timbaggaley.com/ and it works great. I like the highlighting in the nav menu as it scrolls through my front page. I want, though, to highlight in the nav menu when on other, static pages, like the contact page, are active. I’d also like the parent page (‘notes’) to be highlighted when viewing single posts.

    I need to work within the CSS for S2ID rather than using the usual, global current-menu-item / current-menu-page mark-up to avoid confusion in the front page, yes? I can’t figure out how to highlight my contact and post parent pages. Please advise.

    Many thanks
    Tim

    Reply
    • malihu
      Posted on November 22, 2020 at 22:45 Permalink

      Hello,

      It seems that your menu links on the homepage have slightly different URLs than your menu links on the contact page. For example on the homepage, the “gallery” link has a URL of #gallery while on the contact page, it has a URL of https://timbaggaley.com#gallery.

      This means that you don’t have to avoid the global current-menu-item class, as it’s not applied in your homepage menu links.

      Try changing your highlight CSS to the following:

      .mPS2id-highlight, body:not(.home) .current-menu-item a, .single-post .menu-item a[href*='#notes']{ color: #8ba98d !important; opacity: 1; }

      The above should highlight the homepage active links, the inner pages links (e.g. contact), as well as your “notes” link when viewing single posts.

      Let me know

      Reply
  13. Miguel
    Posted on November 10, 2020 at 16:01 Permalink

    Hi, please very much help me! I want make one link-menu to go to a desired fragment intro a page.

    I have installed Page scroll to id to my wordpress but it’s not working. My link is here:

    http://herminasig.md/rca/

    could you please help me how to solve this? Thanks!

    Reply
  14. Gil
    Posted on October 26, 2020 at 14:18 Permalink

    Hey, the newest Version 1.6.9 ist compelty unusable with the Divi Theme (Divi Theme Builder isnt Loading, Images will not be loading…) so I went back to 1.6.8.

    Reply
    • malihu
      Posted on October 26, 2020 at 21:25 Permalink

      Hello,

      You probably have an old selector set in plugin settings. Go to plugin settings and set the “Selector(s)” option to:

      a[href*='#']:not([href='#'])

      Click save changes and update plugin to latest version. Everything should work.

      Let me know

      Reply
      • Gil
        Posted on October 27, 2020 at 10:17 Permalink

        Hello,

        the selector you gave me was already set in our plugin settings. We have over 20+ sites running divi and your plugin and with the newest 1.6.9 all are completly unusable, so I had to downgrade every site now.

        Reply
        • malihu
          Posted on October 27, 2020 at 16:20 Permalink

          Was the selector exactly as I posted it, with quotes?

          a[href*='#']:not([href='#'])

          or is it like this:

          a[href*=#]:not([href=#])

          I have tested 1.6.9 with DIVI and it works for me, so I need to see what’s the culprit. Is there a js console error?

          Reply
  15. Alex Vlair
    Posted on October 26, 2020 at 02:59 Permalink

    Hey there,

    What is the recommended approach to creating an offset using scroll-to-id with Menu links?

    I understand how to create an offset on links with HTML, but since Menu links aren’t directly editable with HTML in WordPress, how can I add an offset?

    Thanks!

    Reply
    • malihu
      Posted on October 26, 2020 at 13:23 Permalink

      It’s better to use your sticky header selector as the offset value. For example, in plugin settings enter the following in “Offset” option field and click save changes:

      #header.sticky

      Reply
      • Alex Vlair
        Posted on October 26, 2020 at 22:48 Permalink

        Thanks for your reply!

        I tried putting #header.sticky and #navigation-menu in the Offset field and neither of them produced any difference in the offset seen clicking on my scroll-to-id link in the Menu.

        My website is http://www.alexvlair.com, and the link is “Projects”. The page scrolls correctly to where I put the scroll-to-id anchor (the text “Projects”) but the offset is wrong and I don’t see a way to modify the offset.

        I also tried using the #ps2id-dummy-offset. I put #ps2id-dummy-offset in the Offset field and created a #ps2id-dummy-offset parameter in my CSS as instructed- but still no effect. My menu link consistently scrolls to the same spot on the page no matter what I change. (I tried emptying all caches as well).

        Perhaps it isn’t compatible with the theme I’m using? (Vavo)

        If there’s another work-around, I’d be happy to know!

        Thanks again for your time!

        Reply
        • malihu
          Posted on October 26, 2020 at 23:24 Permalink

          Please set the offset to #header.sticky and let me know so I can check it.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 05:15 Permalink

            OK I just set the Offset parameter back to #header.sticky.

            Thanks again for your help, it’s greatly appreciated!

        • malihu
          Posted on October 27, 2020 at 16:40 Permalink

          Offset is working now, meaning that content is not “hidden” by your sticky header. You also need to try this:

          Go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option. Click save changes and let me know so I can test it.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 17:40 Permalink

            Ok done! The “Prevent other scripts form handling plugin’s links” option is now enabled.

            Let me know if you see a difference on your end.

            Thanks!

        • malihu
          Posted on October 27, 2020 at 18:52 Permalink

          OK. The problem is that your theme (or another plugin) uses its own smooth scrolling function, which prevents “Page scroll to id” from doing its thing (scrolling the page, applying the offset etc.).

          I don’t know if this function comes from your theme or another plugin because you’re using cache and your js assets are minified and combined.

          Check to see if there’s an option to disable smooth scrolling on your theme or if some other plugin does it. Otherwise it’s impossible for “Page scroll to id” from handling the links and scrolling.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 20:28 Permalink

            Ah I understand.

            Unfortunately there is no option to enable/disable Smooth Scrolling with my theme (Vavo). I’m not using any other plug-ins related to links or scrolling.

            The js assets that the theme uses are:

            jQuery by John Resig
            Isotope by David DeSandro
            Images Laoded by David DeSandro
            Easing by George Smith
            Owlcarousel by Bartosz Wojciechowski
            Fit-Vids by Chris Coyier
            jQuery vissible by Digital Fusion
            Tweenmax by Greensock
            Lightcase by Cornel Bopp Art
            Revolution Slider by Themepunch

            I’m not sure if the problem is coming from one of these? Is there anything I can do to modify them if there is no option given in the theme? (By editing the CSS, perhaps?)

            I disabled my cache and minify in case you wanted to look again.

            Let me know if you think there might still be something that can be done to solve the issue.

            Thanks for your continued support!

        • malihu
          Posted on October 28, 2020 at 14:34 Permalink

          OK. I checked your themes js files. Try this:

          Give all your menu items (appearance > menus) the css class:

          scroll-to

          Also, change their URL to include the www part. For example, change your “PROJECTS” link from:

          https://alexvlair.com/#projects

          to:

          https://www.alexvlair.com/#projects

          Let me know so I can re-check

          Reply
        • malihu
          Posted on October 28, 2020 at 14:38 Permalink

          Sorry, don’t add the scroll-to class on all menu items. Add it only on the menu items that scroll the page (like the “PROJECTS”).

          Reply
          • Alex Vlair
            Posted on October 28, 2020 at 16:25 Permalink

            Oh, that seemed to work…! The link now scrolls so that the menu is at the same height as the link ID. I suppose this was the intent?

            …So now, how can I add an offset…?

            I’d like it to stop about 400 pixels before the ID point (so that the menu is just above the first two images), is there a way to add this?

            It’s encouraging to see a change in any case! Thanks!

          • Alex Vlair
            Posted on October 28, 2020 at 16:39 Permalink

            Actually that created an additional issue; the “Projects” menu link no longer directs to a new page. What this means is that on every other page in the website, the link does nothing.

            On top of it, it seems with my theme I cannot create multiple menus, which means I cannot edit the menu link to be different on other pages. Only one menu bar for all the pages…

        • malihu
          Posted on October 28, 2020 at 22:55 Permalink

          No problem 🙂

          If you want a 400 pixels offset, just set the value:

          400

          in the “Offset” option field in plugin settings.

          For the other issue (the “PROJECTS” link), you’ll need to add some custom javascript to your theme/child-theme. Is this something you can do? I can send you a code to test.

          Reply
          • Alex Vlair
            Posted on October 29, 2020 at 04:20 Permalink

            Ah! Yes, sorry it seems obvious but I guess I didn’t try that.

            It works! So now the front page is working exactly as hoped, thank you very much!!

            For the other issue, I can edit the .php under Theme Options:
            “Vavo Child: Theme Functions (functions.php)”
            I assume this where I would add the javascript code?

            If you do have some code I could test I would love to try!

            Thanks again!

          • Alex Vlair
            Posted on October 29, 2020 at 04:24 Permalink

            (Just for clarity, the functionality that I would like from this menu link on every other page is to load the home page and follow the id target, which is what it was doing before (https://www.alexvlair.com/#projects)
            Thanks!!!)

        • malihu
          Posted on October 29, 2020 at 12:37 Permalink

          Add the following PHP code to your theme/child-theme functions.php:

          //malihu //fix for projects and all similar links that scroll the page function malihu_ps2id_custom_script(){ wp_register_script( 'malihu-ps2id-custom-script', '', array( 'jquery' ), '', true ); wp_enqueue_script( 'malihu-ps2id-custom-script' ); wp_add_inline_script( 'malihu-ps2id-custom-script', '(function($){ $(window).on("load",function(){ var elem=$(".menu-item.scroll-to a:not(._mPS2id-h)"); if(elem.length){ elem.each(function(){ $(this).parent(".menu-item").removeClass("scroll-to"); }); } }); })(jQuery);' ); } add_action( 'wp_enqueue_scripts', 'malihu_ps2id_custom_script'); //-----

          Let me know 😉

          Reply
          • Alex Vlair
            Posted on October 29, 2020 at 18:13 Permalink

            Amazing. It’s working perfectly now.

            Can’t thank you enough! It’s amazing that you make yourself so available to help people struggling with the plug-in like myself.
            I’m not sure how you make ends meet with this kind of business model but I’ll make sure to click the donate link at the bottom of the page, I really appreciate your time here!

            Thanks again!!

  16. Amanda
    Posted on October 12, 2020 at 15:13 Permalink

    It wont let me scroll to page ID from another page.

    What do I do to fix this problem?

    Reply
    • malihu
      Posted on October 12, 2020 at 16:42 Permalink

      Please see related FAQ:

      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-5

      If you need more help, I need to see your site/page.

      Reply
      • Amanda
        Posted on October 13, 2020 at 07:34 Permalink

        Page scroll to id works perfectly on my homepage but if i go to another page lets say portfolio, it won’t let me go to the homepage because it is a custom link where the page scroll is.

        I’m not sure how to add the full address for the ABOUT and SERVICES because it is all on the homepage..

        Thank you for quick response and hope to hear from you v soon,

        Amanda

        Reply
        • malihu
          Posted on October 13, 2020 at 11:53 Permalink

          Hello Amanda,

          Since the links are in your homepage, you can simply use the root-relative URL, by adding a slash in the beginning of the URL. For example, change your “SERVICES” URL to:

          /#services

          and your “ABOUT” to:

          /#about

          That’s easier than using the full URL, like https://aegraphix.com.au/#services.

          You can find more info about URLs here:

          https://yodaconditions.net/blog/html-url-types.html

          Reply
          • Amanda
            Posted on October 13, 2020 at 12:27 Permalink

            Thank you so much! it works now!

  17. Florian Hofmann
    Posted on October 8, 2020 at 14:56 Permalink

    Hello, I love this Plugin and I guess it safes my project :-).

    I have the problem that more than one item is highlighted after scrolling. But only ONE should be highlighted, see this video please:

    https://www.loom.com/share/6918af3251ba466d985e051c519ad689

    Activated is “Allow only one highlighted element at a time” and “Highlight by next target” but still have multiple active.

    Any idea how to avoid to have more then one section active?

    Thank you!
    Florian

    Reply
    • malihu
      Posted on October 8, 2020 at 18:50 Permalink

      Hi,

      I think there’s a conflict between the plugin and the sticky menu. Try this:

      1. Go to plugin settings and disable “Allow only one highlighted element at a time” option.
      2. Add the following in “Highlight selector(s)” option field:

      .iksm-term__link

      Click save changes.

      3. Change your existing CSS rule to:

      .mPS2id-highlight-first{ border: 5px solid blue !important; }

      i.e. change .mPS2id-highlight to .mPS2id-highlight-first.

      Let me know if it worked

      Reply
      • Florian Hofmann
        Posted on October 15, 2020 at 12:13 Permalink

        Hello malihu, THANK YOU very much! This helps me big time! Will play around and if it is ready I will reply again. THANKS, really cool!

        Reply

Comments pages: 1 6 7 8

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php