I'm using the predix-webapp-starter and I would like to have a horizontal nav menu right under the branding header.
The starter app has a vertical menu bar with an accordion button that expands/contracts the menu.
The docs suggest that the px-app-nav component is horizontal by default.
This is my nav-code:
<px-app-nav
nav-items="[[navItems]]"
path-prefix="[[pathPrefix]]">
</px-app-nav>
Here are the nav-items:
navItems: {
type: Array,
value: function() {
return [
{
"label": "Home",
"path": "/home",
"icon": "fa-home"
},
{
"label": "Configuration",
"path": "/config",
"icon": "fa-wrench"
}
]
}
}
Can someone tell me what I need to add to my px-app-nav element to have the link list items be next to each other on the nav bar instead of on top of each other?
I can manually modify the css and html, but it seems like this defeats the purpose of having this prebuilt element.
How it is currently 
How I would like it to look 
We recently launched a system-wide redesign to spruce up the look and feel of all of our Predix components, however the predix-webapp-starter has not yet been updated to use these new "refreshed" components. The horizontal navigation configuration was added as part of this refresh effort in px-app-nav version 2.0.0. You can use the version finder here to upgrade all of your dependencies to the latest versions (but note that some functionality of the webapp-starter will likely break) or continue to use the previous version of px-app-nav without the horizontal configuration and refer to the documentation at archive.predix-ui.com on the pre-refresh component.
Randy,
Thank you for the help.
I'll try to upgrade px-app-nav to v2.0.0.
