Breadcrumbs Navigation - Two Ways
Using the dedicated Breadcrumbs block
Below is the code to style the breadcrumbs navigation block. I have modified the block slightly, removing the delimiter div that contained the ">".
The block that displays the code nicely formatted below is the critical Syntax Highlighter block from Remo. Note that this is called Highlighted Code Block in the marketplace.
.stev-breadcrumbs {
padding-top: 7px;
padding-bottom: 7px;
margin-top: 10px;
margin-bottom: 10px;
}
.stev-breadcrumbs-level span.breadcrumb-active {
padding: 5px;
background-color: #fb9e9f;
margin-left: 4px;
}
.stev-breadcrumbs-level a,.stev-breadcrumbs a {
background-color: silver;
padding: 5px 10px 5px 8px;
border-right-style: solid;
border-right-width: 2px;
}
.stev-breadcrumbs a:hover {
background-color: #659f8b;
color: white;
}
Using the core Auto-Nav block
Below is the Auto-Nav block from the core installation. Notice that the root is displayed as "Home" while in the Smart Web Projects Breadcrumbs block it is displayed as my site name, "Performance C5".
Home Reviews Breadcrumbs Navigation
