Custom Code Header / web components

Custom Coding
1

I was wondering if there was a way to have a custom code header. I guess I could just put a custom code block on all my pages as a work around.

Does anyone know of some good resources for web components? I found this which is easy to use out of the box https://shoelace.style/

Are there other resources like this?

I was looking to create a step navigation bar similar to this Progress steps navbar in Bootstrap (codepen.io)

2

Was able to put this together with some basic Html and CSS, but since its in a custom code block it needs to be pasted into each page and then you can use the to change the class of the appropriate button to selected depending on the page. A bit manual but it works.

/* Base ------------------------------------------------------------------------- */ 
body {
	font: 14px/1.5 Helvetica, Arial, "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
	}

/* Step Navigation
------------------------------------------------------------------------- */
.stepNav {
height: 60px;
position: relative;
z-index: 0;
list-style-type: none;
padding: 0px;
}

/* z-index to make sure the buttons stack from left to right */

.stepNav li {
	float: left;
	position: relative;
	z-index: 4;
	}
	
.stepNav li:nth-child(2) { z-index: 3; }
.stepNav li:nth-child(3) { z-index: 2; }
.stepNav li:nth-child(4) { z-index: 1; }
.stepNav li:nth-child(5) { z-index: 0; }

/* different widths */

.stepNav.threeWide li { width: 33.33%; }
.stepNav.fourWide li { width: 25%; }
.stepNav.fiveWide li { width: 20%; }

   /* step links */

.stepNav a {
	width: 100%;
	height: 60px;
	color: #717171;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
	line-height: 60px;
	white-space: nowrap;
	border: 1px solid #cbcbcb;
	text-decoration: none;
	border-top-color: #dddddd;
	border-right: 0;
	background-color: #ffffff;
	float: left;
	position: relative;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		      box-sizing: border-box;
	}
	
.stepNav a:after {
	content: "";
	width: 42px;
	height: 42px;
	border-right: 1px solid #cbcbcb;
	border-bottom: 1px solid #cbcbcb;
	background-color: #ffffff;
    display: block;
	position: absolute;
	top: 8px;
	right: -22px;
	z-index: -1;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
		 	    transform: rotate(-45deg);

}

.stepNav a:hover{
	color: #ffffff;
	background-color: #ebb32c;
    &:after{
		content: "";
		width: 42px;
		height: 42px;
		border-right: 2px solid #cbcbcb;
		border-bottom: 2px solid #cbcbcb;
		background-color: #ebb32c;
        display: block;
		position: absolute;
		top: 8px;
		right: -22px;
		z-index: -1;
		-webkit-transform: rotate(-45deg);
		   -moz-transform: rotate(-45deg);
		     -o-transform: rotate(-45deg);
			 	    transform: rotate(-45deg);
  }
	}
.stepNav-selected a   {
	color: #ffffff;
	background-color: #ebb32c;
    &:after{
		content: "";
		width: 42px;
		height: 42px;
		border-right: 1px solid #cbcbcb;
		border-bottom: 1px solid #cbcbcb;
		background-color: #ebb32c;
        display: block;
		position: absolute;
		top: 8px;
		right: -22px;
		z-index: -1;
		-webkit-transform: rotate(-45deg);
		   -moz-transform: rotate(-45deg);
		     -o-transform: rotate(-45deg);
			 	    transform: rotate(-45deg);
  }
	}