This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Anchor links

  • Creator
    Topic
  • #16658
    mon1
    Participant

    Hi I am just about finished building a website for a client and now he has asked if the services page can have either a drop down that when clicked on will take you to the service on that page like an anchor link or a list of items in the page so when clicked on they again link to parts in the page, please help as I have searched the internet and can’t find anything, thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #16672
    Jason Bobich
    Keymaster

    Hello,

    In basic HTML, you can link to parts of the current page by adding ID’s to elements and then linking to those ID in your anchors.

    For example:

    <a href="#thing1">Go to Thing 1</a>
    <a href="#thing2">Go to Thing 2</a>
    <a href="#thing3">Go to Thing 3</a>
    
    <div id="thing1">Thing 1...</div>
    <div id="thing2">Thing 2...</div>
    <div id="thing3">Thing 3...</div>

    Is that what you mean?

    #16709
    mon1
    Participant

    Hi Not sure what you mean? sorry.

    I have attached you a screenshot of what I have in WordPress here at http://s29.postimg.org/jqklsxsev/Page_1_page.jpg , basically I want to create a drop down navigation so a list of their services appear then if for instance in this case if they click on Blade sharpening in the drop down nag it will take you to an anchor point in the services page.

    Thanks for your help

    #16711
    Jason Bobich
    Keymaster

    What I was showing you above is just how to link to a certain point on a page of content, in general. You add an ID to an element on the page, then you prefix that ID with a hashtag at the end of the URL you’re linking to.

    Now, as far as the presentation of those links into some sort of “dropdown” menu (note “dropdown” menu can be interpreted to be different things to different people), the only way in this theme would be to utilize Twitter Bootstrap which is built into the theme. This will take basic understanding of HTML on your part. This is not a user feature of the theme, but something you can theoretically take advantage of from Bootstrap.

    http://getbootstrap.com/javascript/#dropdowns

    Note: In your screenshot, I can tell that you are not up to date with the theme. This is going to make following the Bootstrap documentation confusing. I would suggest updating the theme.

    http://themeblvd.com/changelog?theme=alyeska

    #16827
    mon1
    Participant

    Hi I tried your code version but that doesn’t work. I would be happy adding a list at top of page and then when clicked took you to the line of text but it’s not working.

    This is what I have done (see link) http://postimg.org/image/a0xo3klqt/ I have highlighted the two in red boxes. The first should link to the second but the first does’t show on the website?

    Help

    #16830
    Jason Bobich
    Keymaster

    As far as the anchor not displaying on your website, this would have to do with something you’re doing outside of what you’re showing me. I’d have to see a live link to the page on your site to tell you anything about that.

    But also note that in the second highlighted box you need to change the ID of the DIV to “bladesharpening” in order for the anchor to link to that DIV.

    #16835
    mon1
    Participant

    thanks that worked a treat :o)

Viewing 6 replies - 1 through 6 (of 6 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.