Setting the navigation menu to permanently expanded
Create a better experience for users of assistive technologies by keeping the main navigation menu permanently expanded.
By default, the navigation menu on the right side of the screen is expandable, and collapses to display icons without labels when not in use. While this solution saves work space, it is not optimal for users who rely on voice commands or keyboard navigation. To help meet the needs of this audience, you can configure the menu to be permanently open.- In the navigation pane of Dev Studio, click Records.
- Expand the Technical category, and then click Text File.
- Open the py-cosmos-custom-css CSS file.
- On the Main tab, enter the markup that keeps the main
menu expanded:
- For portals with a header,
enter:
.screen-layout-header_left > .screen-layout-region-main-sidebar1 { width: 22rem; } .flex.screen-layout-header_left > .screen-layout-region-main-middle { padding-left: 22rem; } - For portals without a header,
enter:
.screen-layout-header_left > .screen-layout-region-main-sidebar1 { width: 22rem; } .flex.screen-layout-header_left > .screen-layout-region-main-middle { padding-left: 22rem; } .collapse-nav-auto > #sidebar-region-one .infinity-app-title, .flex.content-item.main-header-search > span.primary_search > input::placeholder, .flex.content-item.main-header-search > div > span.primary_search > input::placeholder { opacity: 1; } .flex.content-item.main-header-search > span.primary_search > input, .flex.content-item.main-header-search > div > span.primary_search > input { width: 100%; padding: 0 32px 0 46px; font-size: 16px; }
- For portals with a header,
enter:
- In the upper-right corner, expand the Save as list, and then click Specialize by class or ruleset to save an instance of the rule in your application ruleset.
Previous topic Managing the main content of your application Next topic Assigning WAI-ARIA roles to a Dynamic Layout