WordPress.org

Ready to get started?Download WordPress

Forums

Breadcrumb NavXT
[resolved] CSS Styling Help for a Triangle Navigation Code (3 posts)

  1. LugaGuga
    Member
    Posted 1 year ago #

    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/

  2. John Havlik
    Member
    Plugin Author

    Posted 1 year ago #

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

  3. LugaGuga
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.