# Is it possible to format the font used for custom navigation links?

**URL:** https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026
**Category:** Support
**Created:** [6월 19, 2016, 6:31오전 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026 "2016-06-19T06:31:29Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![ron\_jeremy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ron_jeremy/32/56621_2.png) [@ron\_jeremy](https://meta.discourse.org/u/ron_jeremy)
#### Post date: [6월 19, 2016, 6:31오전 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/1 "2016-06-19T06:31:29Z")

</div>

I have added a new navigation link called **Slideshow** by customizing the following code that I found elsewhere on this forum:

```
<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
  return this.get('href');
}.property('href')
});

I18n.translations.en.js.filters.bugs = { title: "Bugs", help: "Open Bugs" };
I18n.translations.en.js.filters.google = { title: "Google", help: "Navigate to Google" };

Discourse.NavItem.reopenClass({
buildList : function(category, args) {
  var list = this._super(category, args);
  if(!category) {
    list.push(Discourse.ExternalNavItem.create({href: '/category/bug', name: 'bugs'}));
    list.push(Discourse.ExternalNavItem.create({href: 'https://google.com', name: 'google'}));
  }
  return list;
}
});
</script>

```

 ![](https://global.discourse-cdn.com/meta/original/3X/2/b/2b4e9d961219f1629453451ae0dcdcc6f284c1b7.jpg)

What I’d like to do is format **Slideshow** differently from the other navigation links, like maybe a different color, italics, etc. Is this possible? If so, where exactly do I make these changes?

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [6월 19, 2016, 10:13오전 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/2 "2016-06-19T10:13:04Z")

</div>

Use CSS for this.

![](https://global.discourse-cdn.com/meta/original/4X/7/b/9/7b9fb25409b9dcadeecceb5f6de3d365dbc15c65.png)  
E.g.:

```plaintext
/* Add a fontwesome icon*/
a[href="/category/assistenza"]:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  content: "\f0fa";
  margin-right: 3px;
}
/*Change background only for my custom button*/
a[href="/category/assistenza"] {
    background: #0000B3 !important;
    color: #fff !important;
    border-radius: 15px;
}

```

You can use Google font to change characters if you want.  
Or you can simply change the color (e.g red) and add a font-style (e.g italic)

`color: red !important`  
` font-style: italic !important;`

So, you can do everything with CSS

> [@ron\_jeremy](#):
>
> here exactly do I make these changes?

In the same stylesheet where is your code, in the CSS tab.

OFF-topic:  
Great avatar BTW, just finished to watch Ash Vs Evil Dead!

---

<div class="post-metadata">

### Author: ![ron\_jeremy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ron_jeremy/32/56621_2.png) [@ron\_jeremy](https://meta.discourse.org/u/ron_jeremy)
#### Post date: [6월 19, 2016, 10:37오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/3 "2016-06-19T22:37:23Z")

</div>

Thanks for offering to help, but I cannot get it to work.

There must be an easier way to simply add italics to the link. This is the code I am using:

```
<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
  return this.get('href');
}.property('href')
});

I18n.translations.en.js.filters.slideshow = { title: "Slideshow", help: "View homepage slideshow" };

Discourse.NavItem.reopenClass({
buildList : function(category, args) {
  var list = this._super(category, args);
  if(!category) {
    list.push(Discourse.ExternalNavItem.create({href: 'http://www.singletrackbc.com', name: 'slideshow'}));
  }
  return list;
}
});
</script>

```

I also noticed that my custom link is **not visible on mobile devices** (whether I’m logged in or not). That kinda sucks. Is there a way to fix that?

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [6월 19, 2016, 10:59오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/4 "2016-06-19T22:59:34Z")

</div>

![](https://global.discourse-cdn.com/meta/original/4X/6/a/8/6a87a23cf2861672a7cb0c57bce85bc42438e178.png)  
Look in your Admin \> Custom \> Html/CSS, copy and paste this code in CSS tab  
 ![](https://global.discourse-cdn.com/meta/original/4X/1/2/6/12688fbe2da6aeca47de3b6036e46129d135dba8.png)

```
a[href="http://www.singletrackbc.com"] {
    font-style: italic;
}

```

On mobile device there is only one button. It is a dropdown menu, click on Latest and you will see _Slideshow_ too.

---

<div class="post-metadata">

### Author: ![ron\_jeremy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ron_jeremy/32/56621_2.png) [@ron\_jeremy](https://meta.discourse.org/u/ron_jeremy)
#### Post date: [6월 19, 2016, 11:03오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/5 "2016-06-19T23:03:21Z")

</div>

That worked perfectly! Thank you very much! 😀

---

<div class="post-metadata">

### Author: ![tomwrench](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tomwrench/32/54576_2.png) [@tomwrench](https://meta.discourse.org/u/tomwrench)
#### Post date: [6월 20, 2016, 1:13오전 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/6 "2016-06-20T01:13:54Z")

</div>

I’ve got a CSS question related to this which I hope is simple for you answer.

I’ve added the ‘Bookmarks’ link to the topnav and have styled it differently to stand out from ‘latest’, ‘top’ etc. However, I’m having trouble specifying the style of this link when the link is active. I.e. when the user has clicked the bookmark link. What CSS would I use to specify ‘current page’?

![](https://global.discourse-cdn.com/meta/original/3X/6/5/651f42193d18eba6f9b26d134a5462385f9bc459.JPG)

The code I have used so far for styling is:

```
a[href="/bookmarks"] {
    background: #ebebeb !important;
    color: #000 !important;
    border-radius: 0px;
    border-bottom: 0px solid !important;
}

/* mouse over link */
 a[href="/bookmarks"]:hover {
    background: #B9B9B9 !important;
    color: #fff !important;
    border-radius: 0px;
    border-bottom: 0px solid !important;
}

```

Many thanks.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [6월 20, 2016, 7:07오전 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/7 "2016-06-20T07:07:00Z")

</div>

I don’t know if this is the better way (but it works):

```
.list-controls .nav-pills .active a[href="/bookmarks"] {
    font-style: italic;
}

```

However you can remove those lines from CSS:

```
border-radius: 0px;
border-bottom: 0px solid !important;

```

you don’t need them (they are relative to my specific case).

---

<div class="post-metadata">

### Author: ![ron\_jeremy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ron_jeremy/32/56621_2.png) [@ron\_jeremy](https://meta.discourse.org/u/ron_jeremy)
#### Post date: [6월 21, 2016, 7:10오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/8 "2016-06-21T19:10:21Z")

</div>

Just confirmed that the custom link I created does **not** appear when viewed on my phone, only on desktop (will have to confirm tablet later today).

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [6월 21, 2016, 7:23오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/9 "2016-06-21T19:23:53Z")

</div>

> [@ron\_jeremy](#):
>
> Just confirmed that the custom link I created does not appear when viewed on my phone

Yep, I don’t see your custom link too. But I can see mine on mobile device.  
What version of Discourse are you running?

I’m on v1.6.0.beta7 +134.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [6월 21, 2016, 7:49오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/10 "2016-06-21T19:49:04Z")

</div>

> [@Trash](#):
>
> I can see mine on mobile device.

Did you put yours under the Customize that shows when you click the “mobile device” icon above right ?

---

<div class="post-metadata">

### Author: ![ron\_jeremy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ron_jeremy/32/56621_2.png) [@ron\_jeremy](https://meta.discourse.org/u/ron_jeremy)
#### Post date: [6월 21, 2016, 8:18오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/11 "2016-06-21T20:18:47Z")

</div>

Can’t remember the version # but I’m on latest version as of today.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [6월 21, 2016, 8:22오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/12 "2016-06-21T20:22:27Z")

</div>

I put only the fontawesome icon here

```
a[href="/category/assistenza"]:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  content: "\f0fa";
  margin-right: 3px;
}

```

and only for the Assistance button. I add the Chat icon right now.  
BTW I can see them without adding anything on mobile CSS.  
_(I delete all the mobile CSS in that stylesheet and I can still see the links on mobile and they are ok.)_

They works on mobile only with the script that I add in `body` (in which tab you add the script @ron_jeremy?)

 ![](https://global.discourse-cdn.com/meta/original/4X/4/8/c/48c98fb835c9853751d4f6d1385b25584f1ad8e7.png)

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [6월 8, 2024, 12:45오후 UTC](https://meta.discourse.org/t/is-it-possible-to-format-the-font-used-for-custom-navigation-links/46026/13 "2024-06-08T12:45:28Z")

</div>

이 주제는 2911일 후 자동으로 닫혔습니다. 더 이상 새 답변을 작성할 수 없습니다.