# ⬇️ Dropdown Header

**URL:** https://meta.discourse.org/t/dropdown-header/226170
**Category:** Theme component
**Tags:** pavilion
**Created:** [May 4, 2022, 11:49pm UTC](https://meta.discourse.org/t/dropdown-header/226170 "2022-05-04T23:49:48Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [July 7, 2023, 10:27pm UTC](https://meta.discourse.org/t/dropdown-header/226170/26 "2023-07-07T22:27:20Z")

</div>

Hey Keegan, I’m trying to add a background to this so it looks like a button, but when I have multiple header links that are hidden with the security setting I still see a remnant of the menu that was hidden. Is there any way this can be avoided? Thanks!

Edit: I figured out this was happening from adding padding to make it look like a button. I can live without it if there’s no easy solution.

```plaintext
.custom-header-links .top-level-links .custom-header-link {
    padding: 10px 20px;
    border-radius: 5px;
    background: var(--tertiary);
}

```

![image](https://global.discourse-cdn.com/meta/original/4X/4/2/6/42657e5a71d3c5656271c2a4f482e7212090fe85.jpeg)

Edit 2:  
Nevermind, I just had to get creative!

```plaintext
.custom-header-links .top-level-links .custom-header-link {
    padding: 10px 0px;
    border-radius: 5px;
    background: var(--tertiary);
}

.custom-header-links .top-level-links .custom-header-link-caret svg {
    padding-right: 10px;
}

.custom-header-links .top-level-links .custom-header-link-icon {
    padding-left: 10px;
}

```

---

<div class="post-metadata">

### Author: ![kenjdarhan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kenjdarhan/32/298019_2.png) [@kenjdarhan](https://meta.discourse.org/u/kenjdarhan)
#### Post date: [July 14, 2023, 8:22am UTC](https://meta.discourse.org/t/dropdown-header/226170/27 "2023-07-14T08:22:35Z")

</div>

Hello Keegan, when I try to use the security feature with the following settings, the last two links just disappear, even viewing from an account that is eligible to view the links (i.e., belonging to user group “company\_staff”).

Is it that I am not using the feature correctly?

Thank you.  
@keegan

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/8/6/98630a05e088bb1de647efc395694536d58b4029.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/9/c/39c4481edee6f1e5504ce1436de98f7be38c8010.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/4/a/9/4a9c2652acd97f3d85403c79960fcb607546d18f.png)

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [August 1, 2023, 11:53pm UTC](https://meta.discourse.org/t/dropdown-header/226170/28 "2023-08-01T23:53:51Z")

</div>

Hi @kenjdarhan,

It looks like the headerLinkId is pointing to `1` and `2` for the last two links. I think it should be `0` if you’d like it to appear in the same dropdown.

---

<div class="post-metadata">

### Author: ![Yang1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/yang1/32/322583_2.png) [@Yang1](https://meta.discourse.org/u/Yang1)
#### Post date: [August 4, 2023, 6:54am UTC](https://meta.discourse.org/t/dropdown-header/226170/31 "2023-08-04T06:54:07Z")

</div>

Hello, I’ve been using the Dropdown Header component, and it’s been incredibly user-friendly and immensely helpful for us. However, it would be even better if the links in the dropdown menu could open in new tabs. I’m looking forward to your response.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 4, 2023, 7:01am UTC](https://meta.discourse.org/t/dropdown-header/226170/32 "2023-08-04T07:01:24Z")

</div>

PR welcome or contact us to sponsor the work.

---

<div class="post-metadata">

### Author: ![afscstagiaire](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/afscstagiaire/32/312517_2.png) [@afscstagiaire](https://meta.discourse.org/u/afscstagiaire)
#### Post date: [August 22, 2023, 10:47am UTC](https://meta.discourse.org/t/dropdown-header/226170/33 "2023-08-22T10:47:39Z")

</div>

Hey, I’m new to Font Awesome and am having a hard time getting the icons to appear.  
This is what I have so far. Could anyone please help?

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/e/6/ce688cf4de619b455ded30c6cd9f43b2c4d2a5be.png)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [August 24, 2023, 6:35pm UTC](https://meta.discourse.org/t/dropdown-header/226170/34 "2023-08-24T18:35:23Z")

</div>

Have you appended the unusual ones to this global setting?:

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/f/a/0fa73205c68d69af946057d34043910f2e216bf7.png)

---

<div class="post-metadata">

### Author: ![afscstagiaire](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/afscstagiaire/32/312517_2.png) [@afscstagiaire](https://meta.discourse.org/u/afscstagiaire)
#### Post date: [August 28, 2023, 9:11am UTC](https://meta.discourse.org/t/dropdown-header/226170/35 "2023-08-28T09:11:22Z")

</div>

oh my god thank you i kept on appending them using the \< i \>format and it didnt do anything, thanks for this

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [August 28, 2023, 11:53am UTC](https://meta.discourse.org/t/dropdown-header/226170/37 "2023-08-28T11:53:39Z")

</div>

> [@FrancescoM](#):
>
> The page link is: [Forum › Portale CMS - ITTS E. Scalfaro](https://oii.francescomancuso.it/forum/)

Greetings!

Might you elucidate which aspect of your template enabled the positioning of icons/buttons linking to alternate pages on your website?  
 ![image](https://global.discourse-cdn.com/meta/original/4X/1/9/c/19cf765236ed222d6853518109d8e9d7c9b73f36.png)

I was particularly enchanted by the presentation of these buttons in the mobile version - they are superbly arranged above the title in the form of icons in the mobile iteration.

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/e/21e50f5a20711dd5f081763029d3ab1d26f11f31.jpeg)

👍

---

<div class="post-metadata">

### Author: ![FrancescoM](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francescom/32/387072_2.png) [@FrancescoM](https://meta.discourse.org/u/FrancescoM)
#### Post date: [August 31, 2023, 9:06am UTC](https://meta.discourse.org/t/dropdown-header/226170/38 "2023-08-31T09:06:25Z")

</div>

Hi, thanks for your reply 😊.

To make navigation more fluid between all areas of my website (including the forum) I chose to create an html code with this responsive navbar, eliminating the dropdown component

As you can see in these other pages, which are part of the same website, I have inserted the exact same code to have all the links just a click away 😁

[https://oii.francescomancuso.it/](https://oii.francescomancuso.it/)

[https://oii.francescomancuso.it/risorse/](https://oii.francescomancuso.it/risorse/)

[http://oii.francescomancuso.it/contest/](http://oii.francescomancuso.it/contest/)

[https://oii.francescomancuso.it/ranking/](https://oii.francescomancuso.it/ranking/)

---

<div class="post-metadata">

### Author: ![Dotila\_Li](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dotila_li/32/303426_2.png) [@Dotila\_Li](https://meta.discourse.org/u/Dotila_Li)
#### Post date: [October 6, 2023, 3:09pm UTC](https://meta.discourse.org/t/dropdown-header/226170/39 "2023-10-06T15:09:15Z")

</div>

How do you actually fix this, I stll can not make the icon appear 🥲

---

<div class="post-metadata">

### Author: ![Joe\_Nguyen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joe_nguyen/32/336657_2.png) [@Joe\_Nguyen](https://meta.discourse.org/u/Joe_Nguyen)
#### Post date: [October 17, 2023, 5:32pm UTC](https://meta.discourse.org/t/dropdown-header/226170/40 "2023-10-17T17:32:55Z")

</div>

@merefield Great component!

The menu links is not displaying on mobile devices. If the links are position to the right, the caret icons appears but it only shows the dropdown links but not the menu links. What am I missing here?

I’ve attached screenshots of the desktop view, mobile view and the current settings.

 ![SCreen3](https://global.discourse-cdn.com/meta/original/4X/c/9/f/c9fa4f6e4bb1fd2489529ec16562b9787c963146.jpeg)

Mobile View:

 ![SCreen1](https://global.discourse-cdn.com/meta/original/4X/5/d/e/5dea96798faa89e843516484f83443d7b3092d15.jpeg)

 ![SCreen2](https://global.discourse-cdn.com/meta/original/4X/0/0/c/00cce1d92d29c62e2baa6328011076a9a9804581.jpeg)

I would greatly appreciate your help!

Thanks.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 17, 2023, 9:26pm UTC](https://meta.discourse.org/t/dropdown-header/226170/41 "2023-10-17T21:26:22Z")

</div>

Hi @Joe_Nguyen, I have just installed this component and it is working as expected in both mobile and desktop views. If possible can you perhaps post screenshots of the settings you have when you click the Launch Editor buttons in the component settings? I’m not sure what is going on there, you should have something more in mobile view 🤔

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [October 17, 2023, 9:50pm UTC](https://meta.discourse.org/t/dropdown-header/226170/42 "2023-10-17T21:50:03Z")

</div>

Same as Lily, it works fine for me.

I noticed you use the responsive windows in Chrome. If you do that, reload the page (F5) at least once; otherwise, you won’t see the mobile view.

You can also ensure you’re using the mobile view if you append `?mobile_view=1` to the forum URL.

---

<div class="post-metadata">

### Author: ![Joe\_Nguyen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joe_nguyen/32/336657_2.png) [@Joe\_Nguyen](https://meta.discourse.org/u/Joe_Nguyen)
#### Post date: [October 18, 2023, 4:36pm UTC](https://meta.discourse.org/t/dropdown-header/226170/43 "2023-10-18T16:36:31Z")

</div>

@Lilly Here is my settings:

 ![SCreen5](https://global.discourse-cdn.com/meta/original/4X/2/e/2/2e25cb09fb482fb933a0e1cdbe02d7028da4a4d7.jpeg)

@Arkshine - when I added ?mobile\_view=1 to the URL, I do see the dropdown arrow.

 ![SCreen4](https://global.discourse-cdn.com/meta/original/4X/d/3/5/d3556de57cf24809f6da16f4043a3d7b89d53410.jpeg)

Thanks!

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 19, 2023, 1:01am UTC](https://meta.discourse.org/t/dropdown-header/226170/44 "2023-10-19T01:01:26Z")

</div>

Are you sure you are not in desktop mode on your mobile?

---

<div class="post-metadata">

### Author: ![Joe\_Nguyen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joe_nguyen/32/336657_2.png) [@Joe\_Nguyen](https://meta.discourse.org/u/Joe_Nguyen)
#### Post date: [October 19, 2023, 3:36pm UTC](https://meta.discourse.org/t/dropdown-header/226170/45 "2023-10-19T15:36:12Z")

</div>

Hi @Lilly! I see the dropdown on mobile now. 😀 I need to figure out how to get the links open in a new window.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 19, 2023, 3:40pm UTC](https://meta.discourse.org/t/dropdown-header/226170/46 "2023-10-19T15:40:01Z")

</div>

That is something I tend to let the users setup in their preferences/interface settings because people who use screen readers are detrimentally affected by overriding and opening links in new windows or tabs.

---

<div class="post-metadata">

### Author: ![Joe\_Nguyen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joe_nguyen/32/336657_2.png) [@Joe\_Nguyen](https://meta.discourse.org/u/Joe_Nguyen)
#### Post date: [October 19, 2023, 3:44pm UTC](https://meta.discourse.org/t/dropdown-header/226170/47 "2023-10-19T15:44:52Z")

</div>

Again, thank you @Lilly @Arkshine for your help!

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 19, 2023, 3:47pm UTC](https://meta.discourse.org/t/dropdown-header/226170/48 "2023-10-19T15:47:19Z")

</div>

You’re welcome, I’m glad that helped.

@Arkshine did all the work, I just posted comments LOL 😆

[Previous page](https://meta.discourse.org/t/dropdown-header/226170.md?page=1)

[Next page](https://meta.discourse.org/t/dropdown-header/226170.md?page=3)
