WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WP Admin Bar and Anchor Links (11 posts)

  1. WebWeaver64
    Member
    Posted 2 years ago #

    When the Admin Bar is present any anchor links don't show the actual position where the anchor is located due to the Admin Bar covering it up.

    I've tested this on Firefox, Chrome, and IE 9. This seems like a display type bug, but I'm not sure where to look to see if it's been reported.

    Does anyone have any idea how to make it clear the bar?

    Thanks!

  2. claudia_kady
    Member
    Posted 2 years ago #

    Hi WebWeaver64, unfortunatelly I have the same problem.

    What causes the problem is that the admin bar seems to add java script code at the end. To test I changed the ending tag from </script> to <script/> and my anchor link jumped to the right location, but how to force it to do it all the time, I have no idea. It might have something to do with the DOCTYPE.

    Please let me know when you find a solution.

  3. lee@digitalacorn
    Member
    Posted 2 years ago #

    Is it so important that you see when your looking at the site? I would just un-tick it in your user profile settings.

    If you really want it there you could make it into an absolute positioned element - meaning it was still there to use (but just at the top of the page)

    add the code below to your functions file. (or single template file with anchors)

    add_action('wp_head', 'absolute_admin', 999);
    function absolute_admin()
    {
    ?>
    <style type="text/css" media="screen">
    #wpadminbar
    {
    position: absolute !important;
    }
    </style>
    <?php
    }
  4. claudia_kady
    Member
    Posted 2 years ago #

    Hi lee@digitalacorn, and thank you for your response, but to be honest I don't really understand your answer. Will this make the anchor links jump to the right location on the page?

  5. lee@digitalacorn
    Member
    Posted 2 years ago #

    They technically should still jump to the correct place, you just can't see them because of the admin bar. The admin bar is positioned as a fixed element, so it is always at the top of the screen, the code I left above makes it an absolute positioned element so it is always at the top of the page (notice top of page and screen are different)

    Two options really as far as I can see.

    1. go into 'users' > 'your profile' and untick 'Show Toolbar when viewing site'

    2. add the code I left above to your themes function file (to effect the whole site) or in the single templates you want to effect and it will basically make the admin bar get out of the way and stay at the top of the page (instaed of the top of the screen).

    Hope that helps.

    Lee.

  6. WebWeaver64
    Member
    Posted 2 years ago #

    Is it so important that you see when your looking at the site? I would just un-tick it in your user profile settings.

    If your referring to the Admin Bar, yes it's important. I'm in and out of there all day long. Having the bar has made what I do much easier.

    I also like it for our users as it makes it easy to explain how to change a password, so although I could turn it off for users as they don't need all the tools, I like having it for direction.

    The other nice thing about it, is that it has the search in it. Which again I like for users, but don't provide to non-members as they have no reason to search the site.

    Thanks for the code I'll give it a whirl, why is it coded the way it is? Is there a reason it's set to the top of the screen, instead of the page? If there isn't a reason how do we get it implemented into the code?

  7. WebWeaver64
    Member
    Posted 2 years ago #

    Ah! Found out for myself. The code works Thanks!
    What it does is make it absolute (yes you said that), which means it doesn't scroll down the page with you once the code is applied. So when you are further down the page, you no longer see the bar, and have to scroll back up to see it.

    Thanks for the help!

  8. claudia_kady
    Member
    Posted 2 years ago #

    Thank you Lee, I added the code like you said and it works!

    You're a time saviour! :)

    Thanks again!

  9. lee@digitalacorn
    Member
    Posted 2 years ago #

    glad to help - would you like to mark it as resolved.

    Lee.

  10. claudia_kady
    Member
    Posted 2 years ago #

    I would, but I don't have that option..

  11. WebWeaver64
    Member
    Posted 2 years ago #

    Sorry for not closing I will now. I wanted to do some testing, and what I did find was that if I used a full link and not just the #gohere and removed the trailing / in the link it worked out and ended above the anchor. Without adding the code you gave, as I didn't want the bar to be absolute. However that is something that would be useful on other sites, just not the one I was working with as the posts are extremely long, and having the bar move down is important, again due to going in an out of the admin/post.

    e.g.: http://example.com/name-of-post/#gohere
    Didn't work but
    http://example.com/name-of-post#gohere
    worked.

Topic Closed

This topic has been closed to new replies.

About this Topic