Creating An Anchor Link to Theme Footer

Using Ghost
1

Hi all.

I’m putting together a new site based on Ghost that is using the Tuuli theme that I purchased. The basic issue is this:

The Tuuli theme has a section in its header where you can put clickable icons to various socials, which I have setup. What I’d like to do is put a link in the primary navigation menu called Socials that will just jump to the bottom of the page, so users can easily see all the icons.

I know you can use headers in posts to create anchor links, but this is differernt as I’m looking to have the anchor in the footer itself. I’m not an expert in CSS and emailed the Bright Themes support the question and was told this:

“Regarding the anchor, that’s not a CSS thing, what you’d have to do is add an id to the footer element id=“footer” or similar, then the link in your main nav should point to this.”

I’m unsure what exactly they mean here. Is there a way to accomplish what I’m looking to do and if so, does anyone know where I would go to accomplish that?

Thanks all!

2

I’m guessing that what @brightthemes is saying is that you could edit the theme to add an id to right spot on the page, and then you could link to it. So you’d download the theme, unzip it (using whatever tool your computer has built in), and look for the appropriate file in the text editor, looking for the <footer tag. It might be in default.hbs, or if it isn’t, it’s probably in the partials directory, and default.hbs will have something like {{> footer}} (or > bottom-menu, or whatever), which tells Ghost to pull the content from partials/footer (or partials/bottom-menu, or…). Anyway, once you find the file that has that footer tag, you’ll add id=“some-id” within the tag, and then you can link it as #footer from your navbar.

1 Like
3

Hi Cathy!

This is super helpful, thank you! I did find what you referenced in default.hbs. Just one question, where would I put the ID? For example, would it look like this or something else?

{{> footer id=“whatever”}}

I tried that and while I didn’t get any errors when I used the theme with this, the anchor link I created pointing to #whatever in my menu didn’t do anything.

Thanks.

4

OK, progress! In default.hbs, the designation for the footer to pull from partials is this:

      {{!-- The footer at the very bottom --}}
      {{> footer}}

After the alteration, it now looks like this:

      {{!-- The footer at the very bottom --}}
      <a name="socials"></a>
      {{> footer}}

The anchor link in my menu now works! Thank you again. :slight_smile:

In my most ideal of worlds, it would smooth scroll down rather than snap down (which you can apparently do with CSS, but that’s something I can mess about with on my own and see if I can figure it out. The core problem is solved!

I really appreciate the help.

1 Like
5

If you want a smooth scroll, you want JavaScript and scroll into view.

1 Like
6

As someone who hasn’t done HTML of note since image maps were a thing, that scares me. :rofl: Though doing some preliminary Googling, it may not be too tricky. I’ll see what I can do. This is very much a “nice to have” and certainly won’t hold me back from getting the blog launched.

Thank you again. Appreciate you. :slight_smile:

7

Here’s how I would do it:

  1. In your header nav you should link to #socials

  2. edit the partials/footer.hbs file and add the id (should match your link but without the #.

    <footer class="footer" id="socials">

  3. You can add this CSS via code injection to have smooth scrolling:

    <style>html { scroll-behavior: smooth; }</style>
1 Like
8

Oh nice! Thanks very much. That definitely seems to be the better way to do it than I did. I noticed that the Socials link in the navigation always had the lighter shade as well, like you were always on that page and this looks like it would sort that as well. I’ll give it a try!

Thank you both! :slight_smile:

9

Everything’s working using your method, but there’s one odd, very minor cosmetic issue. When on the front page of the site specifically, the Socials menu option it lit up, like it’s indicating you’re actively on that page:

image

It only happens on that page, click into any other page or post and it goes out. I thought maybe this was because I had the front page referenced in the menu, but the link does just point to the anchor:

image
image975×357 20 KB

This might just be a limitation of how Ghost handles things and if so, that’s fine. I was just curious if there was maybe an easy way around this.

Cheers. :slight_smile:

10

You can avoid that with a little css:

<style>
.header__menu .nav-socials {
    background: transparent !important;
}
</style>
1 Like
11

Seems to have done the trick! Is there a reason that only happens on the site’s front page? That’s the part that confuses me.

12

The theme indicates page you’re on, that #socials is just the hash, so it doesn’t count in the calculation of which page you’re on. Hence it thinks you’re on the socials “page” when you’re on the homepage. (I’m a little surprised it doesn’t have you on the socials page on every page, based on how your url is constructed…)

1 Like