remove anchor hashtags in the address bar using pure css?

  • Resolved ac1643

    (@ac1643)


    9 years, 5 months ago

    Hi

    Is it possible to not show anchor hashtags in the address bar using pure css?

    Or can it be done in html? I can’t find much on the internet about this.

    I have no experience with javascript, although if the solution is only by using js and is fairly simple to implement (and someone can describe it to me!) then i’ll give it a shot.

    Like a say, a non-js solution would be ideal

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • Matt Knowles

    (@aestheticdesign)

    9 years, 5 months ago

    I don’t think so. The hashtag is part of the URL construction that says “this is an anchor”.

    You might be able to do it with .htaccess, but I think you would have to do one entry per anchor link.

    Why are you trying to get rid of the hashtag?

    Thread Starter ac1643

    (@ac1643)

    9 years, 5 months ago

    Hi

    Thanks for the reply. Ideally I would like a button, when clicked, to direct the user to a particular point on a page, but without the address changing. One reason is because I think it just looks more tidy, the second is that I was jumping to a theme id (not a name tag i’ve added manually) which is in the correct place but the name doesn’t make sense in relation to the content on the page.

    I could probably go into the theme files and add a name tag with a more relevant description at the correct point. However I was hoping there was some way of hiding it completely in html or css.

    Maybe there’s a better way of navigating around a page (without using js – i hope to teach myself but currently have no knowledge).

    Thanks again
    Adam

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 5 months ago

    Sounds like the solution will be specific to the theme you use. Which theme are you using?

    Thread Starter ac1643

    (@ac1643)

    9 years, 5 months ago

    Hi, i’m using Moesia theme.

    I’ve found the line in the php file that I reference to:

    <section id=”employees” class=”employees-area”>

    I have a href=”#employees”. However the ’employees section is not really about employees therefore I don’t want it to appear.

    So I think if I modify this line (in a child theme file) to:

    <section id=”employees” class=”employees-area” name=”introduction”>

    and make the ref: href=”#introduction”

    then this should show the manually added name ‘Introduction’ as the hashtag?

    This will actually do for now, although i’ll keep looking for a way for either:

    • a way to navigate without using anchors
    • using anchors but hiding them

    Thanks

    Moderator bcworkz

    (@bcworkz)

    9 years, 5 months ago

    You would need to change the id to “introduction” for the href=”#introduction” to work.

    Don’t be so quick to want to hide skip links on the same page. If the labels are meaningful, they help users stay oriented. You can style the link to look like a button. The button can say anything you like. Hiding the skip link in the address bar would require javascript, it’s not worth bothering if you ask me.

    Anchors are a fundamental part of navigation. I appreciate your sense of order, but you are doing users a disservice by taking away reference points.

    Thread Starter ac1643

    (@ac1643)

    9 years, 5 months ago

    Thanks for everyone’s input

    I eventually added an id to a different div in the same location, which works fine.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘remove anchor hashtags in the address bar using pure css?’ is closed to new replies.