Why the dropdown in confluence nav-bar is not added to 'more' when the screen size is reduced?

[s]

I have created a drop down in the confluence nav-bar using Javascript . But it is not added to 'more' when the screen size is reduced. All other web items are added. Could any one please help me know why it is so?

The code that I used to create drop down in the confluence nav-bar is,

 AJS.$('.aui-header-primary ul.aui-nav li:nth-child(4)').after('<li><a' +
        ' id="link-menu" class="aui-nav-link aui-dropdown2-trigger" aria-haspopup="true" href="#" aria-haspopup="true" aria-owns="link-menu-link-content"><span class="browse">' + AJS.I18n.getText("test.label") + '</span><span class="aui-icon-dropdown"></span></a><nav id="link-menu-link-content" class="aui-dropdown2 aui-style-default aui-dropdown2-in-header" aria-hidden="true"><div class="aui-dropdown2-section"><ul id="link-menu-teams" class="aui-list-truncate section-leading first"></ul></div></nav></li>');
    AJS.$('#link-menu-teams').append('<li><a href="' + AJS.contextPath() + '/first/test.action"><span>' + AJS.I18n.getText("fist.label") + '</span></a></li>');
    AJS.$('#link-menu-teams').append('<li><a href="' + AJS.contextPath() + '/second/test1.action"><span>' + AJS.I18n.getText("second.label") + '</span></a></li>');
    AJS.$('#link-menu-teams').append('<li><a href="' + AJS.contextPath() + '/third/test2.action"><span>' + AJS.I18n.getText("third.label") + '</span></a></li>');
}