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

Page scroll to id for WordPress

Page scroll to id is a fully featured WordPress plugin for creating links that scroll the page smoothly to any id within the document. The plugin replaces browser’s “jumping” behavior with a smooth scrolling animation, when links with href value containing # are clicked.
It provides all the basic tools and advanced functionality for single-page websites, in-page navigation, back-to-top links etc. with features like: adjustable scrolling animation duration and easing, link and target highlighting via ready-to-use CSS classes, vertical and/or horizontal scrolling, scrolling from/to different pages etc.

Get started

The plugin works by “connecting” links with href/URL in the form of #my-id or http://my-site.com/page/#my-id to sections/elements within the document with an equivalent id attribute value (e.g. <div id="my-id">...</div>). Clicking such links will scroll the page smoothly to their target id position.

Get started by creating or setting-up your links. The plugin is enabled by default on WordPress Menu links (created in Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to (e.g. #my-id, /page/#my-id, http://my-site.com/page/#my-id etc.).
You can use id values that already exist in your theme or you can create your own id targets using plugin’s “Insert Page scroll to id target” button in wp post visual editor or the [ps2id] shortcode (e.g. [ps2id id='my-id'/]).

To create links within your content, use plugin’s “Insert/edit Page scroll to id link” button and/or shortcode (e.g. [ps2id url='#my-id']link text[/ps2id]) in wp post visual/text editor.
To enable the plugin on existing links, add the ps2id class or the m_PageScroll2id rel attribute to them, making sure the link’s href/URL value contains a hash (#) with the id of the section you want to scroll-to. In addition, you can simply add your links CSS selector (e.g. .menu-item a, a[href*='#']:not([href='#']) etc.) in “Selector(s)” field in plugin settings.

To highlight your links (or targets), use the classes provided by the plugin in your theme’s stylesheet or custom CSS. The default highlight class is mPS2id-highlight but you can set your own in the “Classes & highlight options”. For example, to style the highlighted link (the link whose target element is considered to be within the viewport), you could add in your CSS:

a.mPS2id-highlight{ 
    background: #ff0; 
}

or

.menu-item a.mPS2id-highlight{ 
    background: #ff0; 
}

for highlighting custom menus links only.

If you have a fixed-positioned/sticky menu which overlaps your target’s content when page scrolling is completed, insert your menu CSS selector or a fixed pixel value in the “Offset” field. For example, inserting #navigation-menu will offset the scroll-to position according to the height/width/position of the element with id navigation-menu. In the same manner, setting the “Offset” value to 100 will offset page scrolling by 100 pixels.

Plugin settings

Selector(s)

Use the Selector(s) field when you need to instruct the plugin to handle specific links. The value(s) should be anchor tags (a, i.e. links) in the form of strings that represent ways of choosing elements in the DOM (i.e. CSS selectors).
Each selector is separated by comma, so multiple selectors can be defined as: selector1, selector2, selector3 etc.

The default selector value is a[href*='#']:not([href='#']), meaning the plugin handles all links that have a valid hash value (e.g. #id) in their URL.
The default selector value prior to version 1.6.3 of “Page scroll to id” is a[rel='m_PageScroll2id'], meaning the plugin handles by default all anchor elements (a) with m_PageScroll2id rel attribute value.

Other selector examples could be: a[href*='#'] (links that contain # in their href/URL attribute), a[href='#my-id'] (links with href attribute value: #my-id), a.className (links with class: className).

To enable the plugin on any link that has a hash (#) in its URL, insert a[href*='#']:not([href='#']) as a single selector.

Other default selectors which the plugin is applied automatically include the class ps2id (actual selectors: .ps2id > a[href*='#'] and a.ps2id[href*='#']). This means that any link with a hash in its URL/href (e.g. #my-id) which has the class or is contained (direct children) within an element with the class ps2id will be handled by the plugin automatically.

To exclude specific links from being handled by the plugin (e.g. special tabs, accordions, toggles etc.), use the selectors are excluded field by adding the element selector(s) you want (separated by comma). The default excluded selectors value is set to: a[href^='#tab-'], a[href^='#tabs-'], a[data-toggle]:not([data-toggle='tooltip']), a[data-slide], a[data-vc-tabs], a[data-vc-accordion], a.screen-reader-text.skip-link which excludes most links that are used for toggling elements, tabs, accordions etc.

You can add your owns electors to exclude by separating each one with comma (,), for example:
a[href^='#tab-'], a[data-toggle], a.some-class, .tabs a

The option “Enable on WordPress Menu links” (enabled by default) enables the plugin automatically on custom links created in WordPress Menus.

Scroll duration

Scroll animation duration (i.e. scrolling speed) in milliseconds (1000 milliseconds equal 1 second). Lower values equal faster scrolling.

“Auto-adjust scrolling duration” option (enabled by default) lets the plugin fine-tune scrolling duration/speed according to target and page scroll position. This normalizes the animation duration in order to avoid short-distance scrolling taking too long (e.g. a page scroll of just 100 pixels will last shorter than the value specified in “Scroll duration”).

Scroll type/easing

Scroll animation easing type (i.e. the way the animation progresses at different points within its duration).
You can set different easing types according to page scrolling state: one that is applied when the page is idle (no scrolling currently running) and another that applies while page is scrolling (when a link is clicked while the page is animated/scrolling).
Enable “Force scroll type/easing” option when there’s conflict with outdated easing libraries added by themes or other plugins.

Scroll duration and easing demo

Scroll behavior

Always scroll smoothly when reaching the end of the page/document option adjusts scroll-to position so it does not exceed document length. For example, when scrolling to a target element that is at the bottom of the page, the scrolling animation stops smoothly at bottom of the page instead of “breaking” at an earlier point.
Enable Stop page scrolling on mouse-wheel or touch-swipe option if you want to stop page scrolling when the user tries to scroll the page manually (e.g. via mouse-wheel or touch-swipe).
Enabling Verify target position and readjust scrolling (if necessary), after scrolling animation is complete option, will auto-correct scrolling if the target’s position was changed while the page was scrolling. This event will fire one time only after scrolling animation is complete. This option is useful when document’s length changes according to scroll (for example when a menu becomes sticky after scrolling down the page and its previous state space gets zero).
Enable “Extend target position verification and scrolling adjustment for lazy-load scripts (images, iframes etc.) and changes in document’s length” when dealing with lazy-loaded images and iframes, changes in document’s length etc.

Page layout

Set page scrolling direction (i.e. restrict scrolling) to top-bottom (vertical) or left-right (horizontal) accordingly. For both vertical and horizontal scrolling select auto.
This option does not transform your theme’s templates layout (i.e. it won’t change your theme/page design from vertical to horizontal).

Offset

Offset scroll-to position by x amount of pixels or by selector. The offset value can a be a positive or negative number (indicating pixels), or a matching set of elements in your html (selector). For example, setting the value to 50 will stop page scrolling 50 pixels before reaching the target.
If you need to offset scrolling according to the height (or width) of some element (e.g. according to a responsive/sticky navigation menu), insert the element’s selector in the Offset field. For example, if you have a top fixed/sticky menu with id navigation-menu, set the offset value to #navigation-menu in order to stop page scrolling below it and avoid the menu overlapping your content.

To set different vertical and horizontal offsets (e.g. when Layout is set to auto), add comma separated values in Offset field, e.g. 100,50 (vertical offset 100 pixels, horizontal offset 50 pixels).

The plugin offers selector expressions in order to define more advanced offset values. Examples:

  • :fixed and :sticky expressions – Offset by element with id “some-id” and CSS position fixed or sticky: #some-id:fixed or #some-id:sticky
    Assuming vertical layout, the value above will offset scrolling according to the height of #some-id element (i.e. the element that has id some-id), but only when this element CSS position is fixed or sticky (i.e. when element is sticks to the viewport when scrolling the page). This is useful when for example you have a navigation menu that is sticky/fixed only above a specific viewport size (e.g. only on desktop).
  • :height() expression – Offset by element with class “some-class” and height equal to 100 pixels: .some-class:height(100)
    The value above will offset scrolling according to the height (on vertical layout) of .some-class element (i.e. the element that has class some-class), but only when this element height is exactly 100 pixels.
  • :width() expression – Offset by element with id “some-id” and width greater than 800 pixels: #some-id:width(>800)
    The value above will offset scrolling according to the height of #some-id element, but only when this element width is greater than 800 pixels. This is useful when having responsive navigation menus. For instance, you might have a responsive top sticky menu that switches to a “hamburger” menu when viewport is 800 pixels wide or less. Assuming the menu is as wide as the page/viewport, you’d only want to apply its height as offset when its width is greater than 800 pixels (i.e. when it’s not “hamburger” menu). Adding: #your-menu-id:width(>800) as the offset value will do exactly that.
  • Multiple expressions – Offset by element with id “some-id”, CSS position fixed and height between 50 and 100 pixels: #some-id:fixed:height(>50):height(<100)
    The value above will offset scrolling according to the height of #some-id element, but only when this element CSS position is fixed and its height is anywhere between 51 and 99 pixels.

The plugin can generate automatically a hidden element that can be used as the offset selector. If you enable Auto-generate #ps2id-dummy-offset element option, you can use the #ps2id-dummy-offset as the “Offset” option value and then in your CSS by giving it a height equal to the amount of offset you want.

For example, say you want to have an offset of 100 pixels on desktop and 50 pixels on smaller screens (i.e. mobile). You should enable the Auto-generate #ps2id-dummy-offset element option, set the value #ps2id-dummy-offset in the “Offset” option field and add the following to your CSS:

#ps2id-dummy-offset{
  height: 50px;
}
@media only screen and (min-width: 768px){
  #ps2id-dummy-offset{
    height: 100px;
  }
}

Highlight selector(s)

The matching set of elements (i.e. selectors) handled by the plugin, that will be eligible for highlighting. The value(s) should be anchor tags (a, i.e. links).

The plugin highlights by default all the links it handles. Using this field, you can specify which links should be highlighted and exclude the rest.
For example, assuming you have various links that scroll the page (e.g. menu links, back-to-top etc.) and you want only the menu links to get highlighted, you could insert:
.menu-item a[href*='#']

Classes & highlight options

The plugin adds special classes to the links and the target elements it handles when the following happen:

  • When a link is clicked, it gets the mPS2id-clicked class.
    You can change this class name to your own and you can use it in your CSS to style the clicked link. For instance:
    .mPS2id-clicked{ 
        background: #ff0; 
    }
    
  • When a link’s target element is within the viewport (i.e. visible on the screen), the link gets the mPS2id-highlight class and the target element gets the mPS2id-target class.
    You can change these class names to your own and you can use them in your CSS to style the highlighted link and target. For instance:
    .mPS2id-target{ 
        background: #ff0; 
    }
    
    .mPS2id-highlight{ 
        background: #ff0; 
    }
    

In addition, the plugin will add the above highlight classes with the -first and -last suffix (e.g. mPS2id-highlight-first, mPS2id-highlight-last) in order to differentiate multiple highlighted elements. This is useful when you need to style only the first or last of the highlighted links or targets in your CSS.
For example, if multiple links are highlighted at the same time, instead of using .mPS2id-highlight in your stylesheet, you could do:

.mPS2id-highlight-first{ 
    background: #ff0; 
}

An alternative way of restricting highlight to a single link/target and prevent multiple elements from being highlighted at the same time, is to enable Allow only one highlighted element at a time.

There are times when you need to keep at least one element (e.g. a menu link) always highlighted. Enable Keep the current element highlighted until the next one comes into view option if you need such functionality/behavior and your template/page is laid out in a way that at certain scrolling points there are no target sections visible on the screen (no links highlighted).

Enable Highlight by next target option when your target elements have zero height/width to improve highlighting behavior. This option is useful when you add id targets in your content via plugin’s buttons or the [ps2id id='some-id'/] shortcode, as it extends the scrolling range at which an element stays highlighted.

Disable plugin below

Set the viewport/screen-size in pixels, below which the plugin will be disabled. The value can be width or width,height.
For example, insert 1024 to disable plugin’s functionality when the viewport/window width is 1024 pixels or less. Insert 1024,600 to disable plugin when viewport width is 1024 pixels or less and viewport height is 600 pixels or less.
Please note that the values entered will match CSS media queries.

Leaving the field value empty or 0 (default) disables the option.

Administration

Check Display widgets id attribute in order to show the id attribute of each widget in Appearance → Widgets. This is a convenient way of finding existing id values in order to use them as links targets.
You can also create your own id targets in widgets via the “Page scroll to id target” widget.

Enable insert link/target buttons in post visual editor activates plugin’s buttons in WordPress visual editor toolbar. You can use these buttons to insert links and id targets in your content.

Advanced options

If another plugin or a theme script handles page scrolling and conflicts with “Page scroll to id”, try enabling Prevent other scripts from handling plugin’s links option. This option attempts to remove (on-the-fly) javascript click events by other scripts from the links. Please note that this might not work on some themes or plugins, as it depends on the way those scripts are attaching the link events.
You may set a specific selector for the option above using the Prevent other scripts from handling plugin’s links selector(s) field (it’s recommended to set a specific selector when using the “Prevent other scripts from handling plugin’s links” option).

Enable Normalize anchor-point targets to normalize/reset the CSS properties (height, line-height, border etc.) of anchor-point targets.

Enable Encode unicode characters on links URL when having links with encoded unicode characters (e.g. on internationalized domain names) in their href/URL (for proper highlighting of links).

wp-config options

define('PS2ID_MINIFIED_JS', false);
Use the PS2ID_MINIFIED_JS constant (permanent global variable) in wp-config.php to select which script files will be loaded on the front-end by the plugin. Adding the above in wp-config.php instructs the plugin to load the non-minified/development version of its scripts.


Build pages visually on the front end of your website

You’ve never built a WordPress website like this before. Divi by elegant themes is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor. It can be enjoyed by design professionals and newcomers alike, giving you the power to create spectacular designs with surprising ease and efficiency.
Learn more about Divi

Divi WordPress Theme Monarch Social Sharing Plugin


Plugin shortcodes

Plugin’s [ps2id] shortcode can be inserted directly in WordPress post editor (as with any WordPress shortcode) in order to create links and id targets in your content.

[ps2id url='#some-id']link text[/ps2id]

Attributes

  • url (required) – Link URL
    Examples:
    [ps2id url='#some-id']link text[/ps2id]
    [ps2id url='http://some-site.com/page/#some-id']link text[/ps2id]
    [ps2id url='/page/#some-id']link text[/ps2id]
    
  • offset (optional) – Link-specific offset (bypasses the general offset value in plugin settings)
    Examples:
    Offset scrolling by 100 pixels
    [ps2id url='#some-id' offset='100']link text[/ps2id]
    
    Offset scrolling by the height (or width for horizontal layout) of the element with id navigation-menu
    [ps2id url='#some-id' offset='#navigation-menu']link text[/ps2id]
    
    Offset vertical scrolling by 100 pixels and horizontal scrolling by 50 pixels
    [ps2id url='#some-id' offset='{"y":"100","x":"50"}']link text[/ps2id]
    
  • class (optional) – Link custom class(es)
    You can give the link one or more custom classes (separate multiple classes with space).
    Examples:
    [ps2id url='#some-id' class='class-a']link text[/ps2id]
    [ps2id url='#some-id' class='class-a class-b']link text[/ps2id]
    

    You can change the scroll duration/speed of the link (bypass the general scroll duration value in plugin settings) by adding a special class in the form of ps2id-speed-VALUE (i.e. ps2id-speed-600) with VALUE indicating the scroll duration in milliseconds (lower duration equals faster scrolling).
    Examples:

    [ps2id url='#some-id' class='ps2id-speed-400']link text[/ps2id]
    [ps2id url='#some-id' class='ps2id-speed-1300 class-a class-b']link text[/ps2id]
    
  • aria-label (optional) – Link aria-label attribute
    Examples:
    [ps2id url='#some-id' aria_label='Some text here']link text[/ps2id]
    

Target id shortcode

There are 2 target shortcodes:

1. Anchor-point target

[ps2id id='some-id'/]

2. Wrapper target

[ps2id_wrap id='some-id']
your content...
[/ps2id_wrap]

You can use the wrapper target ([ps2id_wrap]) when you need to wrap content in a target id (same as adding an id attribute to some content). Doing this gives you better control over the highlighting of associated links.
In addition, wrapper target allows you to include other shortcodes within its content, e.g.

[ps2id_wrap id='some-id']
content... [ps2id url='#another-id']link text[/ps2id] 
more content...
[ps2id id='another-id'/]
content... 
[/ps2id_wrap]

Attributes

  • id (required) – Target id
    Examples:
    [ps2id id='some-id'/]
    [ps2id_wrap id='some-id'] your content... [/ps2id_wrap]
    
  • target (optional) – The element that’ll be considered as the actual target for highlighting
    This can be useful when you need better highlighting for target elements that have zero dimensions.
    Examples:
    The associated link will scroll to #some-id element but will be highlighted as if its target is the next adjacent div (the div immediately following #some-id element)
    [ps2id id='some-id' target='#some-id + div'/]
    
    The associated link will scroll to #some-id element but will be highlighted according to #another-id element
    [ps2id id='some-id' target='#another-id'/]
    

Previous versions

Development version: https://downloads.wordpress.org/plugin/page-scroll-to-id.zip

Pages: 1 2


1,008 Comments

Post a comment

Comments pages: 1 4 5 6 7 8 11

  1. Clara
    Posted on January 31, 2020 at 13:04 Permalink

    Hi!
    I am trying to make the plugin work but I have this 2 problems:
    1. Smooth scrolling only works when I refresh the website. In the first attempt to hit the menu it jumps directly without smooth scrolling and it doesnt use the offset I set.

    2. When I go to another page for example Bio –> PressKit and then I want to go back to bio with the main menu it doesn’t work because the link is now /presskit/#biography

    Do you have an idea how I can fix this?

    Thank you a lot!
    Clara

    Reply
    • malihu
      Posted on February 3, 2020 at 14:55 Permalink

      Hi,

      The plugin is not activated in your page so I can’t really say what happens.

      This said, it seems that your theme uses its own smooth scrolling function and it probably prevents “Page scroll to id” from handling smooth scrolling. If this is the case, try enabling “Prevent other scripts from handling plugin’s links” option in plugin settings.

      Reply
  2. Sarah
    Posted on January 16, 2020 at 12:14 Permalink

    Hello!
    Thank you for this plugin, it’s working well… apart from the CSS.

    I’m using the DIVI theme (4.1) when I add the CSS it seems to work, but then once the page is refreshed it stops working. Could I have some advice please?

    This is the CSS I’ve used:

    #top-menu .current-menu-item a.mPS2id-highlight{
    background: #191919;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    }

    Thank you
    Sarah

    Reply
    • malihu
      Posted on January 18, 2020 at 04:04 Permalink

      Hi,

      Not sure if you fixed the issue but when I test your page (Chrome, Firefox, Vivaldi etc.) it is working. Did you fix it?

      Reply
  3. stefan
    Posted on January 7, 2020 at 16:32 Permalink

    Hi, thanks for your plugin! how do I prevent the 1 px highlight and text colour change on the anchor text when a menu item is tapped on mobile and scrolled to? I just want to scroll to the item but not have it visually affected in any way.
    Cheers!

    Reply
    • malihu
      Posted on January 7, 2020 at 17:55 Permalink

      Hi,

      The plugin doesn’t change the visual aspect of links in any way (you’d have to do it manually in your CSS).

      The change in the link’s color, border etc. you describe is most likely happen because of your theme (although I can’t say for sure). If you can post your page/site URL, I could then check it and help you with what CSS to change/add.

      Reply
  4. Serge
    Posted on January 5, 2020 at 15:45 Permalink

    Hi,

    I have a mixed menu.
    Some menu items launch a new page and some menu items use an anchor (onepage).

    Can I use your plugin to highlight the active anchor and the active page (and override the divi theme layout).

    Please have a look here:
    https://airporttaxi.taxi

    Home – Page
    Zum Flughafen – Page
    Vom Flughafen – Page
    Über uns – Anchor (home page)
    Kontakt – Anchor (home page)

    Thanks
    Serge

    Reply
    • malihu
      Posted on January 7, 2020 at 17:48 Permalink

      Yes, you can do this.

      In your additional/custom CSS, you use plugin’s highlight class (.mPS2id-highlight) to highlight the links that use page anchors and the WordPress class (.current-menu-item) to highlight the current page link.

      For example:

      /* current page link */ #top-menu li.current-menu-item > a{ color: white; } /* current page anchor */ #top-menu li.current-menu-item > a.mPS2id-highlight{ color: yellow; }

      Reply
  5. Muhammad
    Posted on November 28, 2019 at 08:15 Permalink

    Hi,
    am thankful for this plugin which i have applied on m landing page here is link https://dandbdubai.com/the-valley-by-emaar/
    On that page its working fine.
    I found one issue in other pages, am assuming a conflict of theme js and this plugin js.
    if you can explore https://dandbdubai.com/buying/ then on top right section there is link ‘Reques A Callback’, when user click on that button, js will open dive having form to submit information. Now this button with ‘on click’ js not opening form.

    <div class="textwidget custom-html-widget"><a href="#" class="contact-box ">Request A Callback</a></div>
    and in js file
    $('.contact-box ').on( 'click', function(event) { event.preventDefault(); $('.contactformwrapper').toggleClass('hidden'); contact_footer_starter(); });
    Can you please help me in this task.

    Reply
    • malihu
      Posted on November 28, 2019 at 11:05 Permalink

      Hi,

      The “Request A Callback” link and the javascript code you posted do not have any functionality related to “Page scroll to id”. Not sure if you wanted to post this on other support forum?

      Reply
  6. Mau
    Posted on November 27, 2019 at 11:52 Permalink

    Hi there,

    thank you for that powerful and versatile plugin! I got my anchor navigation and highlighting according to my wishes within minutes.

    But there is one problem about highlighting the links that I wasn’t able to solve:

    I am using the Lay-Theme for a wordpress site.

    I wrapped some content groups into divs (like , ,, a.s.o.),
    built a menu with according links (#2019, #2018, a.s.o.), and setup the css with styles for highlighting the currently active links/content div.

    Navigating/scrolling works like a charm, but always the last link stops being highlighted as soon as the opening div tag scrolls out of viewport. It does not stay highlighted till the end of the div like the upper divs do.

    The site is: https://dev.flimmern-dc.com/JMU/works

    Maybe you know, or can see what I’m missing here…

    I’d totally appreciate if you had an idea!

    Best
    M

    Reply
    • malihu
      Posted on November 27, 2019 at 21:10 Permalink

      Hello,

      May I ask what page builder you’re using?

      I’m asking because there might be a better way to add the targets in your sections (e.g. by adding an id to the whole row instead of adding simple targets).

      Let me know 🙂

      Reply
      • Mau
        Posted on November 28, 2019 at 10:22 Permalink

        Hey,

        thanks for your reply!

        I dont use a page builder, i just use the “lay theme” (http://laytheme.com/) which basically works with a grid of colums and rows to layout your content.

        I tried to wrap several rows with content into divs with the according id. (i.e. four rows with one image each wrapped into , four rows for 2018, four rows for 2017, a.s.o.

        As I said – navigating/scrolling works perfect and also the highlighting works as estimated with exception for the last link/wrap.

        I also tried giving the ids to every single row (which means there are four rows with the id=”2019″, four rows with the id=”2018″, a.s.o.)

        So when I scrolled tha page all the way down there are definitely rows with the id=”2015″ inside the viewport, but still the last link stops being highlighted as soon as the opening div for the last wrap scolls out of viewport…

        Reply
        • Mau
          Posted on November 28, 2019 at 10:46 Permalink

          When I check the source code, I see that only the first row of the last group of rows gets the “mPS2id-target-* classes”…

          Reply
          • malihu
            Posted on November 28, 2019 at 16:44 Permalink

            OK. Is it perhaps possible to add each of your images in one row? i.e. not having one row for each image?
            For example:

            row id 2019 image/caption image/caption row id 2018 image/caption image/caption image/caption row id 2017 image/caption etc...

        • malihu
          Posted on November 28, 2019 at 11:25 Permalink

          I see. The issue is that the target ids are set on each each sibling section while the option “Highlight by next target” is enabled. The last section(s) do not have a “next target” as they are last.

          Can you wrap your rows with another row and give the wrapper row the id?

          What I mean is this:

          Right now, your sections are like this:

          row id 2019 row id 2019 row id 2018 row id 2018 row id 2018 row id 2017 etc...

          It’s better to make them like this:

          row id 2019 row row row id 2018 row row row row id 2017 row etc...

          i.e. can you add rows within another row/section with your theme editor?

          Reply
          • Mau
            Posted on November 28, 2019 at 12:18 Permalink

            Hi there,

            thank you so much for trying to help here!

            Unfortunately there seems to be no way to wrap rows into other rows or rows into sections.

            Custom html is theoretically possible, but when I try wrapping rows like this

            row
            row
            row

            then I see the div closed in the source code before the first row opens up.
            By the way same thing when I try using the wrapping shortcodes.

          • Mau
            Posted on November 28, 2019 at 12:22 Permalink

            Hi there,

            thank you so much for trying to help here!
            I’m sorry, I was too stuid to display code here properly.

            Unfortunately there seems to be no way to wrap rows into other rows or rows into sections.

            Custom html is theoretically possible, but when I try wrapping rows like this

            div id="some-id" row row row … /div

            then I see the div closed in the source code before the first row opens up.
            By the way same thing when I try using the wrapping shortcodes.

  7. Darryl
    Posted on November 21, 2019 at 11:09 Permalink

    Hello, I’m having a problem on my french version of the site, for the english one which is test.maisonsasha.com, it scrolls down perfectly but on french, even though setting different ids, doesn’t scroll at all. Any help please? The ids are on the submenus of hair-salon and spa for english, and salon de coiffure and spa for french.

    Reply
    • malihu
      Posted on November 21, 2019 at 18:32 Permalink

      Hi,

      There are a few issues on your French page:

      1.There are no targets with the ids you have on your links. For example, on http://test.maisonsasha.com/fr/salon-de-coiffure/ there’s no coupes or brushing-mise-en-plis target (i.e. no elements with those ids).

      2.Your web server redirects all requests without trailing slash. This means that you need to add the trailing slash on your links URL. For example, you should change your link “COUPES” from:

      /salon-de-coiffure#coupes

      to:

      /salon-de-coiffure/#coupes

      3.Your French site URL is http://test.maisonsasha.com/fr/. Right now, your links point to the English version (http://test.maisonsasha.com). You need to change your French links URL to point to the French version by adding the /fr/ fragment in their URL. For example, you should change your link “COUPES” from:

      /salon-de-coiffure#coupes

      to:

      /fr/salon-de-coiffure/#coupes

      So, to summarize:

      Add the targets to your French page (as you’ve done in the English).
      Change your French links URL, so they start with /fr/ and have the / before the hash (#).

      Hope this helps

      Reply
  8. Maria
    Posted on November 19, 2019 at 13:27 Permalink

    Hi,

    page scroll 2 id is working fine for me and doing exactly what I was hoping for but it is not as precise as I hoped. The highlighted element in the menu changes to the next as soon as the next anchor is scrolled into display. Meaning, the highlighted element changes when the next one is only at the bottom of the screen which is confusing.

    Is there a way the change the settings of the plugin so it only changes the highligh when the next section is already in the upper third of the screen?

    Please excuse my unprofessional way of describing the issue. It’s my first time designing and building a website.

    Thank you so much in advance.
    Best regards,
    Maria

    Reply
    • malihu
      Posted on November 21, 2019 at 18:11 Permalink

      Hello,

      There are more than one ways of changing the way links are highlighted. Can you post your page/site URL so I can check what exactly happens?

      Reply
      • Maria
        Posted on November 21, 2019 at 19:41 Permalink

        Hey,

        thanks for the reply. This is the URL:
        https://carbonbikerepairs.de/

        The highlighted Link in the menu changes as soon as the next section shows up at the bottom of the screen. In my case I think this is a bit confusing for the user.

        Thanks so much for your time.
        Kind regards
        Maria

        Reply
        • malihu
          Posted on November 22, 2019 at 15:44 Permalink

          Since you’re using the Elementor page builder, the best way to add the targets is the one described here:

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

          Elementor Page Builder allows us to enter an id value for each element we want (via the CSS ID field). This is very handy as a)we don’t need to create our id targets manually and b)makes links highlighting easier and more precise (see post above).

          I would use the way above and disable the other options you have enabled like “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target”.

          Reply
          • Maria
            Posted on December 2, 2019 at 17:56 Permalink

            Thank you so much for this advice! Scrolling is much smoother now, highlighting of the menu not 100% percise, but good enough 😉

            I think you created an amazing tool and the support you are offering here is awesome. Especially for wordpress newbies like me.

            Cheers, Maria

  9. Kristin
    Posted on November 14, 2019 at 01:01 Permalink

    Plugin is working great except that the setting “scroll from/to different pages” doesn’t seem to be working on some pages, even while internal links work correctly on that page. But other pages don’t seem to have the issue, so clearly there’s a problem with the page content.

    On the page where it’s not working, the page loads with the anchor tag, https://example.com/mypage#foo but then the anchor changes just to #, https://example.com/mypage# and doesn’t scroll.

    The page with the issue is huge so if you have any suggestions before I start looking through in detail, that would be great.

    Thanks!

    Reply
    • malihu
      Posted on November 14, 2019 at 14:53 Permalink

      Please post your page URL that’s not working so I can check what happens. If I see your page I’d be able to help.

      Reply
  10. Gary
    Posted on November 5, 2019 at 14:56 Permalink

    I have activated the plugin but the two new icons (setup link and bull’s eye anchor) are not appearing next to the standard text editing icons. I’m using the Juster Theme.

    Thank you,

    Reply
  11. Alexis
    Posted on November 1, 2019 at 23:39 Permalink

    Hi,
    I have a problem with my site. For some reason the page jumps back to top when i click on the menu links.
    I suspect this was caused by some update, but i can’t figure what’s the problem.

    Thanks in advance.

    Reply
    • malihu
      Posted on November 3, 2019 at 19:14 Permalink

      Hi,

      Your theme uses its own functions for scrolling the page. These functions seem to conflict with “Page scroll ti id” as both are trying to do the same thing.

      The theme scripts that do this are:

      ...themes/croma/js/main.js
      and
      ...themes/croma/js/barba.min.js

      If plugin’s “Prevent other scripts from handling plugin’s links” option cannot resolve this automatically, you’ll need to see if there’s an option in your theme to disable its smooth scrolling feature.

      Reply
  12. Eric
    Posted on October 28, 2019 at 16:16 Permalink

    Hi,
    Thank you for this plugin. I’ve got an issue on my website when I’m scrolling down to the bottom of it (in fact the footer). At this moment, the highlighted menu will be not the last one, but the second one.
    Of course the footer don’t have any entry in the menu.
    Have you got any idea to fix it ?
    Best regards.
    Eric

    Reply
    • malihu
      Posted on October 28, 2019 at 18:56 Permalink

      Hi,

      I’m not sure I understand the issue but if the footer doesn’t have an id and menu entry, how/what link should be highlighted?

      Can you post your site/page URL and explain a bit more what you need?

      Reply
      • Eric
        Posted on October 28, 2019 at 22:06 Permalink

        Hi,
        Currently, my website is private (still under development). I just sent you an email with all the informations you need to the login.
        Thank you for helping me.

        Reply
      • Eric
        Posted on October 29, 2019 at 11:27 Permalink

        Hi, I really appreciated your help to fix my issue.
        Now everything is working well 😉

        Reply
        • malihu
          Posted on October 29, 2019 at 13:46 Permalink

          Awesome! Glad I helped 🙂

          Reply
  13. Ronny
    Posted on October 23, 2019 at 15:46 Permalink

    I was using this on a page with a vertical timeline which is working great. The user would press a button that would start the autoscroll to the end of the timeline. However, is there a way to stop the autoscrolling during the middle of it if the user wants to stop? For example, there is a post on the timeline halfway through and the user uses their mousewheel to scroll back up, it there a way to stop the autoscrolling because right now, it just keeps scrolling down.

    Thanks!

    Reply
    • malihu
      Posted on October 23, 2019 at 15:50 Permalink

      Go to plugin settings and enable (check) “Stop page scrolling on mouse-wheel or touch-swipe” option. Save changes and test your page. I think this is what you need.

      Reply
  14. Orsi
    Posted on October 21, 2019 at 20:16 Permalink

    Hello,

    Thank you for the nice job. I have got a problem with the scrolling. I don’t need smooth scrolling, I need just to jump. I tried to set the scroll duration but nothing happend. Can you help me?

    website: http://www.nomadpartysator.hu

    Thank you!

    Reply
    • malihu
      Posted on October 22, 2019 at 00:12 Permalink

      Hi,

      Your theme uses its own js script for scrolling the page (the script is ...themes/sydney/js/main.min.js).

      I saw that you’ve already tried to use plugin’s “Prevent other scripts from handling plugin’s links” option but it seems that the plugin cannot remove the theme’s functionality automatically.

      You need to check if there’s a theme option to disable smooth scrolling (or change its scrolling duration/speed). If the theme does not provide such option, then you’d have to manually edit your theme’s main.min.js file (not sure if you want to do this though).

      Reply
  15. Md. Moshiur Rahman
    Posted on October 1, 2019 at 18:20 Permalink

    Hey there,

    Awesome work. Thanks so much for building this. One small issue: when i click a link it’s scroll but it scrolls under container-wrapper or Header menu. http://www.innovatorit.com/photoshop/ You can see here. Please help me how can i fix the problem and solve the problem asp.

    Reply
    • malihu
      Posted on October 2, 2019 at 08:06 Permalink

      Hi,

      When you have sticky headers in your page, you need to use plugin’s “Offset” option.

      To offset scrolling according to your top sticky header element, go to plugin settings and set the “Offset” option value to:

      .wgl-sticky-header

      Save changes and test your page.

      Reply
  16. Dean
    Posted on September 27, 2019 at 13:15 Permalink

    Hi, thank you for the awesome plugin! I was able to make it work without issue. Though I have a question…

    On my page, I have the following sections…
    Home (clicking on it scrolls to top)
    About
    Services
    Contact

    I was able to set the other links to be highlighted when scrolled to respective section. But how do I get the “Home” link to be highlighted when I’m at the top of the page?

    Reply
    • malihu
      Posted on September 27, 2019 at 13:44 Permalink

      Hello,

      I’m guessing you’re using #top to go to the top, right?

      If yes, you should either add the id top to your first/top section (or body tag) or some other id if you want to keep “top” for something else (e.g. you could use #home).

      In short, you need to create an additional id, like the ones you already have, for the top of the page.

      Hope this helps

      Reply
      • Dean
        Posted on September 30, 2019 at 14:50 Permalink

        Gosh! How did I not think of that!? Problem solved! Thank you very Malihu!

        Reply
        • malihu
          Posted on October 2, 2019 at 08:08 Permalink

          Glad I helped 🙂

          Reply
  17. Allan
    Posted on September 22, 2019 at 19:23 Permalink

    Hi. Great plugin.
    I followed all the steps, created a nice menu, put the custom CSS on the right place, but when I click on the menu it still jumps to the page instead of smoothly scrolling down (or up). Any idea why this might be happening?

    Reply
  18. Gal
    Posted on September 1, 2019 at 15:33 Permalink

    I checked “Allow only one highlighted element at a time” and yet once I stop scrolling, two or more items on the menu are highlighted. seems like a bug.. any idea what I should do?

    Thanks, Gal.

    Reply
    • Adam
      Posted on September 3, 2019 at 23:43 Permalink

      Same issue here. Please help. Thank you. –Adam

      Reply
  19. Jim
    Posted on August 28, 2019 at 05:28 Permalink

    This is a multi-page site and I was hoping this plugin would not reload when clicking # links from the same page. Is there something in the setup that I am missing that would help with this?

    Try going to
    http://cmcnycdemo.flywheelsites.com/about-cmc/#mission
    and then clicking on “About > Values” in the menu. You will see it reloads the whole page first. Would love it just to scroll when on the same page.

    Thanks!

    Reply
  20. Phoebe
    Posted on August 9, 2019 at 06:18 Permalink

    Hi, I’m using the theme Ovation. I can’t seem to get the right CSS selector to put in my offset. It just doesn’t work.

    If I don’t offset anything, it works perfectly well on my mobile, but not my pc. When I set 165 pixels as an offset, then it works fine for my pc, but not for my mobile.
    Any help would be appreciated!

    Reply
  21. Eva
    Posted on August 5, 2019 at 00:53 Permalink

    Hey, I just discovered your plugin, and it really helped to get my anchors right. Thank you! Everything seems to be working fine, but one thing keeps me puzzled… When I go from a lower section to a higher section, it scrolls all the way up to the menu and back to the higher section from there. Can I do anything to avoid this? I am using WP + Generatepress Pro here https://test.timeisnowfoundation.org/

    Thank you!
    Eva

    Reply
  22. Stefan
    Posted on July 17, 2019 at 16:18 Permalink

    Hi,

    how can i recalculate the Positions for Highlighting (or maybe reinit the Plugin) when i have some Accordions inside the Content?

    When expanding a Tab from Accordion then the Menu (Sticky) is highlighted wrong (too early)

    I have already tried with the Options in the Plugin but with no success

    Reply
    • malihu
      Posted on July 22, 2019 at 13:13 Permalink

      Can you post your page/site URL so I can check it?

      Reply
  23. Florian
    Posted on July 16, 2019 at 12:57 Permalink

    Hey! Awesome Plugin with many settings, great.

    The smooth scrolling works perfect for links within the page but does not work from the menu / navigation.

    Please check out https://www.privacy-top20.com/en/start-en and click “Data protection products” (
    https://www.privacy-top20.com/en/start-en/#datenschutz-anbietervergleich). It jumps to the right area but not smooth. When I scroll to the bottom of the page and click on the button “Free, fast and easy! Start now” then it is percectly smooth.

    Can you please help me to archive also smooth scrolling when I am clicking in the top menu “Data protection products” ?

    Thank you
    Florian

    Reply
    • malihu
      Posted on July 16, 2019 at 14:24 Permalink

      Hi,

      Your “Data protection products” top link does not have an actual URL with a valid id. Its URL is just #.

      You can test this by hovering your cursor over the link and seeing the URL at the bottom of the browser window https://www.privacy-top20.com/en/start-en/#

      This link (“Data protection products”) is handled by another script (I don’t know which one because your js code is minified, concatenated etc.). I can see the code that handles this link in the HTML:

      <script> jQuery(".tab-category > a").click(function() { window.location.href = "/en/start-en/#datenschutz-anbietervergleich"; }); </script>

      As you can see from the above, the script appends the actual URL programmatically when the link is clicked.

      I assume that the script does this because the link has a sub-menu, although I can’t say why it’s done this way.

      Note that this happens only on this particular link (because it has a sub-menu). If you create a new link in your top menu with a URL #datenschutz-anbietervergleich or /en/start-en/#datenschutz-anbietervergleich it will work as expected (just like “Free, fast and easy! Start now”).

      I don’t know if you’ve added the correct URL (e.g. #datenschutz-anbietervergleich) in your “Data protection products” link and the theme or another plugin removes it(?). In any case, when the page is loaded, the “Data protection products” link URL does not have a target id (just the hash).

      All this means that you cannot fix it with “Page scroll to id” because it’s not an issue with the plugin, so I can only explain what causes of the problem.

      Hope this helps

      Reply
  24. Tiara
    Posted on July 9, 2019 at 01:22 Permalink

    So I have installed your plugin and have been using the # id tags in the menu custom-links and only 2 of the menu items are scrolling and I cannot figure out why. If I could get some help that would be great.

    Reply
    • [email protected]
      Posted on July 10, 2019 at 04:20 Permalink

      Only 2 of my menu links are scrolling, I am confused as to why they all are not working when I have the url and the # the same. Please help. Thank you

      Reply
      • malihu
        Posted on July 15, 2019 at 10:52 Permalink

        Hello,

        You links are not the same. The ones that have /home/ in their URL do not work because you don’t have home.

        You need to change your links to be like the “About”, e.g. http://sigsolar.tiaradesignsco.com/#about and not http://sigsolar.tiaradesignsco.com/home/#about

        In addition, your “OUR TEAM” button URL is not correct. It currently is:

        #Our Solar Experts

        It should be:

        #our-solar-experts

        Reply
  25. Eric Bobrow
    Posted on July 3, 2019 at 11:48 Permalink

    I’ve installed your plugin but it isn’t working – clicks to in-page anchor links are jumping rather than scrolling. I tested another similar plugin and it scrolled OK, although doesn’t give nearly as much control as you offer; so I am confident my anchor links are set up OK however would really like to get your plugin to function.

    The page is the home page of a new site archicadestimating.com. I have a sticky menu set up with links to each anchor section of the page.

    I’m using the standard selector:
    a[href*=’#’]:not([href=’#’])

    I tried adding the ps2id class to all of the anchors; this did not make any difference.

    I have checked the box to “Prevent other scripts from handling plugin’s links (if possible)” but it didn’t help.

    I’d be very appreciative if you have suggestions or can tell what needs to be changed to make the plugin scroll properly.

    Thanks in advance for your assistance!

    Eric Bobrow

    Reply
    • malihu
      Posted on July 3, 2019 at 17:46 Permalink

      Hi,

      The issue is that “thrive-visual-editor” prevents “Page scroll to id” from scrolling the page. You did well by enabling “Prevent other scripts from handling plugin’s links” option but this option cannot always fix such issues, mainly because it depends on how the other scripts are handling the menu links.

      In your case, the “thrive-visual-editor” applies a click event on the link and its parent list-item, which stops the plugin from scrolling the page.

      I have no idea how the other plugin you tested was scrolling the page but my guess is that it probably created its own links (i.e. it did not use your theme’s menu links). I can;t really say though.

      You need to check if there’s an option in “thrive-visual-editor” to disable page scrolling for same-page links (i.e. links with # in the URL).

      FYI, the script that handles your menu links is this:

      ...plugins/thrive-visual-editor/editor/js/dist/frontend.min.js

      If there’s no option to disable “thrive-visual-editor” from handling same-page links, then the only other way would be to manually edit the file above or add a special custom js script in your theme that’ll remove “thrive-visual-editor” events from both the link and its parent list-item element.

      Reply
      • Eric Bobrow
        Posted on July 4, 2019 at 04:19 Permalink

        Thank you so much for answering so clearly. I worked around the issue by creating a version of the menu as plain text (with hyperlinks) rather than using Thrive Themes option for a custom menu element.

        While it was fiddly to get it styled nicely, the scrolling actions work perfectly. I appreciate your expert guidance on what was causing the issue, which allowed me to assess a reasonable work-around for the click event conflict.

        Reply
  26. Thibaut
    Posted on June 29, 2019 at 01:30 Permalink

    Hello, I think I setup the thing properly but when I scroll nothing happens. It scroll to the other section only with mouse click. I guess I missed something?

    My theme is DIVI, the plugin is on, in CSS ID, I inputed 1,2,3,… as ID then on link I put #2,#3,#4… maybe that’s where I am wrong. I’ve read the post about DIVI many times but I am stupid, I cannot use it…

    Reply
    • malihu
      Posted on July 1, 2019 at 15:40 Permalink

      Hi,

      Please tell me what page and which links to test.

      Reply
      • Thibaut
        Posted on July 1, 2019 at 16:41 Permalink

        the homepge so https://kokoropanier.com

        Each image should bring to the next picture when scroll. Here I only succeed to do it on click…

        Reply
        • malihu
          Posted on July 2, 2019 at 20:19 Permalink

          Your image links (with the arrow) do not have a target id. Their URL is just: #

          You should set the next image target on your links. For example, the first image link should be #2, the second #3 and so on…

          You should also go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option because your theme (or another plugin) has its own function for scrolling the page.

          Reply
          • Thibaut
            Posted on July 2, 2019 at 21:46 Permalink

            Thank you.

            Actually for the arrow, that’s a theme option. I’ve assigned a target #2 to the module. Hence two things happen: when you click on the image it goes to the next picture (as you described above) then the arrow function does not work anymore.
            My question is why the scroll does not work in that case? only the click works.

          • Thibaut
            Posted on July 2, 2019 at 22:18 Permalink

            The pictures target ID is set (#2,#3,…) but on scroll nothing happens, is it normal?

          • Thibaut
            Posted on July 3, 2019 at 09:46 Permalink

            sorry, I meant on mouse wheel.

        • malihu
          Posted on July 3, 2019 at 17:57 Permalink

          It seems that your theme has its own custom way for scrolling the page by clicking links and via mouse-wheel. This prevents “Page scroll to id” (or any other similar plugin) from handling links and scrolling the page.

          The way your theme navigation works, you can’t really use other ways, other than its own functions, for page scrolling.

          Reply
          • Thibaut
            Posted on July 3, 2019 at 19:07 Permalink

            OK, I see, Thanks for you time and help.

  27. Frances
    Posted on June 26, 2019 at 02:01 Permalink

    Do you have a short video demo, that shows clear up -close steps

    It would be most helpful
    I am trying to link from a text button to an image and also another one to a text on the same homepage.
    I am working on a localhost development pc. so I cannot give an URL
    Thank you in advance
    Really stuck right now
    Frances

    Reply
  28. Alfie
    Posted on June 8, 2019 at 06:43 Permalink

    Hi. Thank you for this nice plugin. I seem to be having trouble getting it to move to the correct positions. I tried using the offset to account for the sticky header. I assume it has something to do with the lazy loading. But even then some things seem very off. Wondering if you have advice about that. Specifically this link https://bedlam.org/support/#special-recognition which seems to go very far past it’s id target point. Thanks for any feedback you can provide.

    Reply
    • malihu
      Posted on June 8, 2019 at 16:29 Permalink

      Hello,

      The issue with the last link is because of the lazy loading of the images in the “OUR DONORS” section.

      On the desktop, these image placeholders have a height of 242 pixels but when the image is loaded, their actual height becomes 129 pixels. This is 113 pixels difference and since you have 4 rows, it’s 113*4 pixels.

      So, scrolling to “SPECIAL RECOGNITION” section the first time (before the “OUR DONORS” images are loaded), is off by about 400 pixels (the second time you click the link, it scrolls to the correct position since the images are loaded).

      This issue will happen with or without “Page scroll to id”. The only way to have lazy loading images and correct page scrolling is giving your image placeholders the same height as the actual images will have when loaded.

      Hope this helps

      Reply
    • malihu
      Posted on June 8, 2019 at 17:09 Permalink

      In addition, “Page scroll to id” provides an option to deal with such issues, so try the following:
      Go to plugin settings and enable “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option. Save changes and test.

      Reply
      • Alfie
        Posted on June 8, 2019 at 17:50 Permalink

        Hi. Thanks so much! I did click “Verify target” option, but it doesn’t re-adjust. However, I will try sizing the place holders and let you know.

        Reply
    • Alfie
      Posted on June 8, 2019 at 19:09 Permalink

      I set a max-height on the image containers and it worked! Thanks so much for the advice!

      The only thing now (and it’s not a big deal) is that there are internal links on this page that are not smooth scrolling. https://bedlam.org/learning/
      You will find them in the “Classes” area in the descriptions where the instructor’s names are linked. I added the ps2id class to the links, but they still jump instead of being smooth. Any idea how to fix?

      Thanks again!

      Reply
      • malihu
        Posted on June 8, 2019 at 19:20 Permalink

        These links seem to be handled by the “wp-accessibility” plugin, which prevents “Page scroll to id” from scrolling the page. The script that handles them is this one:

        ...plugins/wp-accessibility/js/skiplinks.webkit.js

        I saw that you’ve already enabled “Prevent other scripts from handling plugin’s links” option, which means that you’d have to manually edit this script or deactivate the “wp-accessibility” plugin or add an extra js code to your theme template.

        Let me know

        Reply
        • Alfie
          Posted on June 11, 2019 at 01:23 Permalink

          Ah! I see. Okay. I prefer to keep the accessibility plugin. The page jump on these links is not a big deal. Thanks for looking into it!

          Reply
  29. Alan
    Posted on June 6, 2019 at 17:44 Permalink

    Great plugin! I do have one small issue I can’t seem to figure out. I use Divi and I can’t get the offset option to work on my fixed navigation on mobile and tablet. The navigation is fixed on desktop and works flawlessly, however, not so much on the mobile and tablet.

    Can you please help me with this? If you need any more information from me, I’d be happy to share.

    Thanks again for a great plugin!

    Reply
    • malihu
      Posted on June 6, 2019 at 18:47 Permalink

      Hello,

      This happens because Divi theme has its own function for scrolling the page. This prevents “Page scroll to id” from doing its thing.

      Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Also change the “Offset” option value to:

      .et_fixed_nav #main-header

      Save changes and test.

      Let me know 🙂

      Reply
  30. Andy Bratton
    Posted on June 3, 2019 at 03:35 Permalink

    Hey there,

    Awesome work. Thanks so much for building this. One small issue: I can’t seem to get the “Allow only one highlighted element at a time” and
    “Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)” options to work as expected. I have them selected in the plugin settings and I’m still seeing the opposite behavior. Can you assist?

    Thank you!

    -A

    Reply
    • malihu
      Posted on June 3, 2019 at 15:48 Permalink

      Hi,

      In order to use these options effectively, you need to limit which links get highlighted. You can do this by going to plugin settings and setting the “Highlight selector(s)” option to:

      #StickyProjNav .menu-item a

      Save changes, test your page and let me know

      Reply
      • Andy Bratton
        Posted on June 4, 2019 at 05:29 Permalink

        Hey there,

        That definitely helped, but I still cant get the roll-over highlighting to work.

        Also, is such a menu depoly-able to multiple pages on the same site? I’m having trouble getting that to work as well but it may be a function of whatever I’m missing.

        Thanks for your help,

        -A

        Reply
        • malihu
          Posted on June 4, 2019 at 14:19 Permalink

          Most likely yes. You’d have to ask the menu plugin developer on how to use it on multiple pages.

          Reply

Comments pages: 1 4 5 6 7 8 11

Post a comment

Cancel reply

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