⬇️ Dropdown Header

Theme component
26

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.

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

image

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

.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;
}
2 Likes
27

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

image

image
image1043×355 5.4 KB

28

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.

31

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.

1 Like
32

PR welcome or contact us to sponsor the work.

33

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
image1363×375 28.2 KB

34

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

image
image745×121 3.89 KB

35

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

2 Likes
37

Greetings!

Might you elucidate which aspect of your template enabled the positioning of icons/buttons linking to alternate pages on your website?
image

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
image1080×465 73.7 KB

:+1:

1 Like
38

Hi, thanks for your reply :blush:.

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 :grin:

1 Like
39

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

40

@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
SCreen31849×243 39.8 KB

Mobile View:

SCreen1
SCreen11227×535 47.1 KB

SCreen2
SCreen21143×826 83.6 KB

I would greatly appreciate your help!

Thanks.

1 Like
41

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 :thinking:

2 Likes
42

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.

3 Likes
43

@Lilly Here is my settings:

SCreen5
SCreen51369×779 112 KB

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

SCreen4
SCreen4519×547 19.7 KB

Thanks!

2 Likes
44

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

1 Like
45

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

1 Like
46

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.

47

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

1 Like
48

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

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

2 Likes