Hidden navigation link shows up in "More" menu

[jonb]

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.

[Davin Studer · Accepted solution]

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?

[jonb]

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

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

OR

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.

[jonb]

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.

[jonb]

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.