Home Forums Weaver Xtreme Theme Scroll to ID on Page

Topic Resolution: Resolved
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #71070
    ROBIN
    Participant

    I have spent a couple of days trying to create a scrolling page, where when you click on a link in the menu it takes you to a specific ID on the home page.

    I have tried this Plug In, which is super cool, but it seems to kill the site:  Page Scroll to ID

    Thing is, when I tried to do the code myself, it also killed the site.

    By Killed the site I mean it won’t load the page I had the ID selectors coded on.  It seems to be how I am creating the menu that is the problem. I can deactivate everything else, but if that menu has been choosen to be the primary Menu , NO pages will load.

    I have searched the How To options on Weaver, but didn’t see anything to use.

    https://spirit-tank.com/test/ is the page.  I have added a menu to the top of the page and it works. but it won’t work if I make that new menu the primary menu

    Is this a known issue or can you point me in a direction that might work?

    I realize this is a basic feature, but I can’t figure out what is wrong.

    Thank you for any help you can provide.

    #71071
    scrambler
    Moderator

    I would first do a test page manually, there is no need for a plugin to do this, and it only adds complexity and potential issue

    Create a test page

    Check the Allow Raw HTML and Script

    In the editor in text mode paste the HTML below

    <h1 id="welcome">Welcome</h1>
    <p style="margin-bottom:300px;">
    randowm text
    randowm text
    randowm text
    randowm text
    </p>
    <h1 id="new">New</h1>
    <p style="margin-bottom:300px;">
    randowm text
    randowm text
    randowm text
    randowm text
    </p>
    <h1 id="done">Done</h1>
    <p style="margin-bottom:300px;">
    randowm text
    randowm text
    randowm text
    randowm text
    </p>
    <h1 id="bottom">Bottom</h1>
    <p style="margin-bottom:300px;">
    randowm text
    randowm text
    randowm text
    randowm text
    </p>

    ID for anchors with no caps

    Then create a menu with 4 items by using the Custom Link Option, in the URL Box type the corresponding anchor (#welcome, #new, #done, #bottom) and type what you want in the Link Text for each.

    Then allocate that menu to your primary menu

    Works for me

     

    #71115
    ROBIN
    Participant

    Wow, this has been a journey

    I tried what you suggested with the same result.  I started doing some troubleshooting.  I didn’t have enough faith in myself prior, to think that it wasn’t me causing the problem.

    Because I trust in your skill level I did everything you suggested and got the same result.  Pushed myself up the skill level matrix a bit.

    First I deleted the plugin I had been using thinking maybe this is causing a conflict.  Nope, even with that gone I had the same result.

    Then I deleted everything you and I had created, except I created a new menu as the primary menu in the menu options area.  Once I did this I had a broken site.

    I then started deleting plugins and JETPACK was the issue.  There must be some kind of conflict between Jetpack and the menu Option area.

    Thanks for the help, with JetPack gone, I can use the code and make it work.

    #71116
    scrambler
    Moderator

    Glad you figured it out

    #71118
    ROBIN
    Participant

    I decided the Menu needed to be sticky to the top, so that creates a new twist.

    Is there a way to make it so when someone hits the menu link that it links to the Heading below the menu bar?  Right now the Heading is behind the menu bar.  I added Margin so the content shows, but that creates a lot of blank space.

    If not, I think we can live with this, but it just isn’t as professional as I would like.

    Link: https://spirit-tank.com/welcome/

    #71119
    scrambler
    Moderator

    This is a regular issue with anchors and fixed headers, there are ways to add some margin to the anchor.

    Here is are some discussion

    add margin to <a href=”speakers”> Tag…? (Example) | Treehouse Community (teamtreehouse.com)

    javascript – offsetting an html anchor to adjust for fixed header – Stack Overflow

    One line CSS solution to prevent anchor links from scrolling behind a sticky or fixed header (getpublii.com)

    How to prevent anchor links from scrolling behind a sticky header with one line of CSS | Go Make Things

    If you search add margin to and anchor when using fixed header, you should find various solutions.

    Unfortunately, I am about to leave for a few days, so I won’t be able to look into it

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.