nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Navigation Menus - Worksite 8

The_Nelson

Does anyone have any links to style guides for these. Its not obvious from any of the CSS files or JS files where I can control Font size/font type/icon images for the Java menu in Worksite 8.

Thanks for any replies.

Find more posts tagged with

Comments

dabird

On the WorkSite Web installation CD is a PDF document entitled WorkSite CSS Customization Guide. This document provides the nitty-gritty details, along with screen shots, of all the styles used inside WorkSite Web. I believe the document is also posted in the in DevNet's Tech Library.

The_Nelson

Thanks for the reply but unfortunately the general css file for worksite web doesn't fully cover the nav menu.

More specifically I'm referring to the DHTML MenuX 4.28 and its multitude of .js files that are in as includes.

Googling the menu author/name returns inconclusive results unfortunately. Does anyone have any links etc that could help?

Edit: To clarify further, this not the action menus etc, but only the navigation menu that can be added to the 'Global-nav' section of the worksite page.

piechartlabels.txt

TestReport.rptdesign

dabird

The global navigation menus actually use the menu objects that are defined in includes/Menu.js. This is a third-party JavaScript, but we have modified the class properties to support WorkSite UI, so googling won't help. For root items, review MenuButton object and the classes associated with it. For subitems, review the MenuItem object and its classes.

The image in these menus is not controlled by the CSS. Rather, it is passed as an argument to the menuStack.addItem method:

menuStack.addItem(new MenuItem('My Matters_New', bindFunction(openSelectedLinkEx, 'Home.aspx?', '_self'),'', '../images/matters.gif'));

So you would need to review the code in addItem to determine how to change the image to your liking.

See the attached screen shot for further clarification.