Published
on
July 5, 2017
| 646 views
| 3 followers
members are following updates on this item.
|
CSS Success: Navigation Hijinks
Some quick tricks to adjust your navigation.
Your navigation bars determine the shape of your community, and define the path that people take to reach what they need. Being able to make adjustments to that can let you streamline people's experience, by removing elements that might distract, or highlighting tabs to draw focus. Today we'll go over how to make those changes with CSS, by pinpointing the necessary classes or ids and constructing the sample code. You can find an introduction to using CSS in Igloo here, in our first CSS Success article.
Affecting navigation
Every navigation bar in Igloo is an unordered list, with each item contained in a list item, which uses an <li> tag. In addition, the navigation bar itself has both an id and a class of "navigation", making it easy to target the list inside. Each link in the navigation bar has an id and a class that's always "nav-" and the url of the item. So a Page called Pecans would have a class of "nav-pecans".
Pages, Spaces, and Channels also have their own ids, and can be targeted by type, like "ig-channeltype-blogchannel", or individually, by picking out "ig-page-pecans". There are too many possibilities to list here, but you can always find those ids and classes by inspecting the page and looking at the <body> tag in the elements tab of your browser.
Highlighting navigation
You can use CSS to change the colours of the navigation by using the background property, but you can always highlight or change the active tab in your navigation by targeting the .active class. This can highlight or change the tab of an area someone is visiting, ensuring that they know where they are within the structure of the Page or Space. You might target and change the active tab like this to change the colour: 
li .active {
background: #00AA66;
}
Prevent interaction with navigation
Some communities focus on using the dropdowns feature for navigation, nesting department Spaces and Channels under Pages to create navigation that looks simple on the surface, but reveals its true complexity when someone hovers over an element. In sites like that, it's not necessarily useful to have those top level navigation items be proper Pages in their own right. The goal is to bring people deeper into the community, and those top level Pages act as placeholders to create the dropdowns. With some quick CSS, we can disable the ability to select those top level Pages, so users need to move through those dropdowns.
We can target navigation items with dropdowns by using #ig-dropdown-toggle, but to get to the Page itself, we'll need to target the link that's trying to work, using something like this:
#ig-dropdown-toggle a {
pointer-events: none;
}
The dropdowns will still work as expected, but the top level areas won't be clickable, letting you create placeholders in your navigation at every level of your community. To fine tune that, you might target the primary navigation only, or certain Spaces or Pages.
For more information about using CSS in Igloo, you can ask a question in the Community area.
Viewed 645 times
Page Options
