Title: CSS Styling Help for a Triangle Navigation Code
Last modified: August 20, 2016

---

# CSS Styling Help for a Triangle Navigation Code

 *  Resolved [LugaGuga](https://wordpress.org/support/users/lugaguga/)
 * (@lugaguga)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/css-styling-help-2/)
 * Hi,
 * It’s a wonderful plugin, but I am absolutely lost to enhance the CSS styling 
   for it. I found in the internet a page, and I would like now implement this css
   style. But it’s not working. Maybe you or soemeone other can help? Thank you 
   very much in advance.
 * Regards, Luigi
 * The author of this code is **Chris Coyier**
 * **Link:**[css-tricks.com/triangle-breadcrumbs](http://css-tricks.com/triangle-breadcrumbs/)
 *     ```
       HTML
       <ul class="breadcrumb">
       <li><a href="#">Home</a></li>
       <li><a href="#">Vehicles</a></li>
       <li><a href="#">Vans</a></li>
       <li><a href="#">Camper Vans</a></li>
       <li><a href="#">1989 VW Westfalia Vanagon</a></li>
   
       CSS
       .breadcrumb {
       	list-style: none;
       	overflow: hidden;
       	font: 18px Helvetica, Arial, Sans-Serif;
       }
       .breadcrumb li {
       	float: left;
       }
       .breadcrumb li a {
       	color: white;
       	text-decoration: none;
       	padding: 10px 0 10px 65px;
       	background: brown;                   /* fallback color */
       	background: hsla(34,85%,35%,1);
       	position: relative;
       	display: block;
       	float: left;
       }
       .breadcrumb li a:after {
       	content: " ";
       	display: block;
       	width: 0;
       	height: 0;
       	border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
       	border-bottom: 50px solid transparent;
       	border-left: 30px solid hsla(34,85%,35%,1);
       	position: absolute;
       	top: 50%;
       	margin-top: -50px;
       	left: 100%;
       	z-index: 2;
       }
       .breadcrumb li a:before {
       	content: " ";
       	display: block;
       	width: 0;
       	height: 0;
       	border-top: 50px solid transparent;
       	border-bottom: 50px solid transparent;
       	border-left: 30px solid white;
       	position: absolute;
       	top: 50%;
       	margin-top: -50px;
       	margin-left: 1px;
       	left: 100%;
       	z-index: 1;
       }
       .breadcrumb li:first-child a {
       	padding-left: 10px;
       }
       .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
       .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
       .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
       .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
       .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
       .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
       .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
       .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
       .breadcrumb li:last-child a {
       	background: transparent !important;
       	color: black;
       	pointer-events: none;
       	cursor: default;
       }
       .breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
       .breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important
       ```
   
 * [http://wordpress.org/extend/plugins/breadcrumb-navxt/](http://wordpress.org/extend/plugins/breadcrumb-navxt/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [John Havlik](https://wordpress.org/support/users/mtekk/)
 * (@mtekk)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/css-styling-help-2/#post-3421806)
 * Make sure you are using the `bcn_display_list()` function rather than the normal`
   bcn_display()` function if you need the breadcrumb trail output as list elements.
   Note that you will need to provide the opening and closing `ol` or `ul` tags 
   around the call to `bcn_display_list()`.
 *  Thread Starter [LugaGuga](https://wordpress.org/support/users/lugaguga/)
 * (@lugaguga)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/css-styling-help-2/#post-3421819)
 * Hi,
 * Works as you suggested. Just needed to adopt as well .breadcrumb to .breadcrumbs.
 * For non-CSS, non-HTML literated it’s really diffcult to design the breadcrumbs.
   But the plug-in is really great!
 * Thank you very much!
 * Regards, Luigi

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS Styling Help for a Triangle Navigation Code’ is closed to new replies.

 * ![](https://ps.w.org/breadcrumb-navxt/assets/icon.svg?rev=1927103)
 * [Breadcrumb NavXT](https://wordpress.org/plugins/breadcrumb-navxt/)
 * [Support Threads](https://wordpress.org/support/plugin/breadcrumb-navxt/)
 * [Active Topics](https://wordpress.org/support/plugin/breadcrumb-navxt/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/breadcrumb-navxt/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/breadcrumb-navxt/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [LugaGuga](https://wordpress.org/support/users/lugaguga/)
 * Last activity: [13 years, 4 months ago](https://wordpress.org/support/topic/css-styling-help-2/#post-3421819)
 * Status: resolved