Support » Plugin: Breadcrumb NavXT » CSS Styling Help for a Triangle Navigation Code

  • Resolved LugaGuga

    (@lugaguga)


    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

    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/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author John Havlik

    (@mtekk)

    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().

    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.