It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Hidden navigation link shows up in "More" menu Edited

I'm using the AJS.toInit function as described here to edit the contents of the navigation bar in confluence server.


Hiding Items

I've tried setting the display = "none"or class = "hidden" and those work fine.

The issue is that when the window is resized to be much smaller, the navigation items are collapsed down to a "More" dropdown menu and my once hidden links show up there.


How can i permanently remove the items?


Adding Items

Similarly, any additional links I add show up fine, but do not get collapsed into the "More" menu as the default ones do.

1 answer

1 accepted

0 votes
Answer accepted
Davin_Studer Community Leader Dec 12, 2019

If you are doing it via JavaScript then that will only happen once on page load unless you have logic to redo the hide when the nav is collapsed as it probably rebuilds the DOM for that process. I would instead use native CSS to do the hide. You could even still use JavaScript to inject the styles in if you want to use JavaScript. Are you using the html macro to do this right now?

Yes, currently i'm trying to do it in the Custom HTML through javascript.

document.getElementById("people-directory-link") = "none";


document.getElementById("people-directory-link").parentElement.className = "hidden";


This hides it on page load, but as you mentioned gets over written as the DOM is rebuilt from the window resize and navbar collapse scripts from confluence.

Instead, I put this in the global stylesheet:

#people-directory-link{  display:none;  }

This ensures that the link stays hidden on the navbar, but it still shows up when collapsed in the "More" menu.

This seems to be working for me though:

#people-directory-link{  display:none !important;  }  

aui-item-link a[href$="/browsepeople.action"]{  display:none !important;  }  

The aui-item-link style with the specific href selector gets rid of the link in the "More" menu.

The !important is....important because otherwise those were also getting replaced by confluence styles.

As for inserting elements into the navbar. I'm using this in the AJS.toInit function

space_menu = document.getElementById("space-menu-link").parentElement
AJS.$('<li><a href="#" class="aui-nav-imagelink" title="Events">Events</a></li>').insertAfter(space_menu);

On page load, this inserts my Events link after the Spaces menu as desired. 

However, when resizing the window, Events doesn't get added to the "More" menu while Spaces does.  When expanding back out, the links get rearranged so they are no longer in the correct order. 


I don't see any difference when comparing the properties of my custom links to those already on the navbar.  So i'm trying to figure out if it's something in the javascript code for the resize events.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Confluence

How is your team having fun and bonding, remotely, utilizing Confluence?

Thanks everyone for answering last week’s question. The winner of the random drawing from those who commented is: @LarryBrock I’ll contact you separately with your prize details. This wee...

269 views 9 6
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you