Bluesky Logo In Top Nav (So Frustrating)

I am using the Source theme and am really struggling to add the Bluesky icon to my nav.

There is conflicting code in this forum between this post below

and the Ghost tutorial page

… which has not even got the Bluesky code in it yet … (which would help immensly if they updated it) but I’ve followed the code close enough but still not working. ;(

Can someone please clarify what’s needed because they are different and neither work on my site. I just get a rectangular box with an X through it (which is different to the X logo which does show correctly).

I watched a Buffer video on Bluesky and after that it’s a no brainer to switch from Twitter, so keen to update my site.

Cheers in advance.

Might be a bit hodge podge but this is the code I’ve used on my Source Theme …

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/brands.min.css" integrity="sha512-DJLNx+VLY4aEiEQFjiawXaiceujj5GA7lIY8CHCIGQCBPfsEG0nGz1edb4Jvw1LR7q031zS5PpPqFuPA8ihlRA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <style>
  
    :where(.nav, .gh-navigation-menu) .nav-x a,
    :where(.nav, .gh-navigation-menu) .nav-bluesky a,
    :where(.nav, .gh-navigation-menu) .nav-mastodon a {
        font-size: 0 !important;
    }

    :where(.nav, .gh-navigation-menu) .nav-x a::before,
    :where(.nav, .gh-navigation-menu) .nav-bluesky a::before,
    :where(.nav, .gh-navigation-menu) .nav-mastodon a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    :where(.nav, .gh-navigation-menu) .nav-x a::before {content: "\e61b"}
    :where(.nav, .gh-navigation-menu) .nav-bluesky a::before {content: "\e6a3"}
    :where(.nav, .gh-navigation-menu) .nav-mastodony a::before {content: "\f4f6"}

    :where(.nav, .gh-navigation-menu) .nav-x a,
    :where(.nav, .gh-navigation-menu) .nav-bluesky a,
    :where(.nav, .gh-navigation-menu) .nav-mastodon a {
        font-size: 0 !important;
    }

    :where(.nav, .gh-navigation-menu) .nav-x a::before,  
    :where(.nav, .gh-navigation-menu) .nav-bluesky a::before,
    :where(.nav, .gh-navigation-menu) .nav-mastodon a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
</style>

Got help from support for this so closing post.

Thanks for raising this with the support team.

Since we solved the issue for you, we went back and improved the Tutorial / Generator — Bluesky is now available in the code snippet generator :tada:

3 Likes

Question – I missed this the first time around, so am going to dig into it later. But, the final example shows the icons on the menu row, with no other menu choices. If you already have navigation set up, what happens to the rest of the menu if you add the icons to your navigation?

Nothing, I think. This css detects particular label names, so things that don’t match should be unchanged.

:point_up: 100% and Gold star for Cathy.

Navigation in settings

The result

1 Like

Awww :star: :star: :star:

I’m glad my asking Ghost Support for this has helped others. I only asked as got no support in the forum, but a good result for all in the end.

1 Like

Well, I gave it a shot. I noticed that the “Choose your theme” was no longer part of the code generator, which turned out to be a problem for me, even though I’m not using one of the official themes.

The code references each individual channel in the CSS, but in using Inspect, I found that all my menu items use the same class name. Don’t see a way to differentiate them without doing some hard-coding in the theme itself, which I frankly don’t have time for. :frowning:

Thanks to the support team for the code generator, though. It’s a helpful tool.

@BruceInLouisville , you should be able to code something like nav-{{label}} into the classes for the theme, if it isn’t already there. That should get you a set of classes you can use. :)

I’m just a little bemused as to why things like this are not built into the themes themselves, given that social is a key driver for blog traffic. Other platforms manage it.

I’m just lucky to be using the theme in the tutorial. A different story otherwise which I can appreciate. However, it’s a good learning curve and whilst it cost me some time, I’ve gained a better insight into how it works.

I can put them into the CSS without a problem. What I can’t figure out is how to tie those classes to the individual menu items. The code in navigation.hbs just walks the array of menu items (which makes perfect sense). How would I get that code to realize that THIS item in the array is the Facebook menu item, and associate it with the Facebook class?

In navigation.hbs. You need to add something like nav-{{label}} to the class for each item. (And label gets replaced with facebook or home or whatever when the page renders.)

That’s the problem – there aren’t individual items in navigation.hbs. It runs a for/each loop through all the items, assigning them the nav classes.

{{#foreach navigation}}
  <li class='c-nav__item c-nav__item--primary'>
    <a href='{{ url absolute='true' }}' class='c-nav__link {{#if current}} c-nav__link--current {{/if}}'>{{ label }}</a>
  </li>
{{/foreach}}

Sorry to be so dense, but I don’t see a good way to assign additional classes to certain items without some sort of IF test going through the #foreach loop again. (And if that’s what you meant, again sorry for being so dense. :wink: )

If that’s the only way, then fine, I can do that … if I can find the time. ;-)

Hey Bruce,

Sorry, I think I assumed more comfort with handlebars than maybe you have. Change it as follows:


{{#foreach navigation}}
  <li class='c-nav__item c-nav__item--primary  nav-{{label}}'>
    <a href='{{ url absolute='true' }}' class='c-nav__link {{#if current}} c-nav__link--current {{/if}}'>{{ label }}</a>
  </li>
{{/foreach}}

When Ghost renders the handlebars to HTML, it’ll loop through the menu items and replace the {{label}} in the classes for the ‘li’ with the link’s name, so you’ll get things like nav-x, nav-facebook, etc, that the css above will target.

Okay, I’ve finally got it (mostly) working. Yes, I was unaware that I could pull the {{label}} out of the nav item. If I had known that, I might have been able to figure it out myself. (If its and buts were candy and nuts …)

I had to keep playing with the style assignments, but finally got it simplified to the point that it actually applied them.

Now, the only thing I need is to get rid of the social media channel name in the menu. Right now, I’ve got the icon and the name side by side. Thoughts?

1 Like

Here’s what it looks like currently:

I assume there is something wrong in the CSS that should hide the label, but my CSS looks pretty much like all the examples.

Thoughts?

You have an extra comma in this rule:

  .nav-Facebook a,
  .nav-YouTube a,
  .nav-BlueSky a,
  .nav-Threads a,
  .nav-Mastodon a, { /* Get rid of the comma on this line! */
        font-size: 0 !important;
    }

With the comma, the entire rule is considered invalid and ignored

3 Likes

Ah, the value of an extra pair of eyes! (Those pesky commas.) Thank you!

1 Like