I recently changed how navigation happens on my blog and wanted the discussion site I use for comments to follow a similar format. Here’s what it looks like:
I added the section where it says Blog, Now, Tools, and has social icons. Here’s the code behind it:
</head>
<script type='text/x-handlebars' data-template-name='/connectors/site-map-links/add-joebuhlig-links'>
<div class="site-links-divider"></div>
<li><a class="page-link" href="http://EXAMPLE.COM">YOUR LINK</a></li>
<li><a class="page-link" href="http://EXAMPLE.COM">YOUR LINK</a></li>
<li><a class="page-link" href="https://EXAMPLE.COM">YOUR LINK</a></li>
<li>
<div class="social-media-list">
<a href="https://twitter.com/TWITTERHANDLE">
<span class="icon icon--twitter">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
</svg>
</span>
</a>
<a href="https://github.com/GITHUBUSERNAME">
<span class="icon icon--github">
<svg viewBox="0 0 478.613 478.613">
<path fill="#828282" d="M427.501,200.695c1.776-11.238,2.884-23.56,3.163-37.377c-0.107-59.246-28.468-80.21-33.925-90.038
c8.037-44.89-1.331-65.309-5.688-72.299c-16.07-5.704-55.91,14.722-77.678,29.101c-35.491-10.389-110.494-9.375-138.621,2.689
C122.856-4.389,95.408,1.277,95.408,1.277s-17.745,31.82-4.691,78.371c-17.075,21.759-29.802,37.143-29.802,77.949
c0,9.773,0.607,19.008,1.637,27.893c14.705,77.318,75.97,110.674,136.15,116.426c-9.056,6.881-19.928,19.903-21.432,34.992
c-11.379,7.357-34.268,9.789-52.067,4.193c-24.939-7.88-34.486-57.266-71.833-50.221c-8.081,1.512-6.475,6.842,0.523,11.386
c11.378,7.38,22.094,16.554,30.354,36.185c6.344,15.072,19.687,41.982,61.873,41.982c16.747,0,28.477-1.979,28.477-1.979
s0.319,38.406,0.319,53.385c0,17.238-23.264,22.078-23.264,30.348c0,3.289,7.7,3.601,13.888,3.601
c12.229,0,37.673-10.186,37.673-28.103c0-14.237,0.227-62.081,0.227-70.46c0-18.307,9.811-24.136,9.811-24.136
s1.201,97.727-2.361,110.829c-4.177,15.408-11.744,13.219-11.744,20.076c0,10.233,30.589,2.502,40.735-19.897
c7.849-17.495,4.334-113.331,4.334-113.331l8.183-0.178c0,0,0.094,43.892-0.188,63.944c-0.295,20.769-2.438,47.025,9.898,59.417
c8.097,8.15,32.903,22.451,32.903,9.382c0-7.574-17.371-13.833-17.371-34.353V344.45c10.553,0,12.734,31.072,12.734,31.072
l3.804,57.727c0,0-2.526,21.065,22.756,29.856c8.925,3.126,28.018,3.976,28.913-1.271c0.897-5.26-22.99-13.038-23.217-29.342
c-0.123-9.93,0.445-15.742,0.445-58.934c0-43.168-5.799-59.137-26.007-71.863C355.669,295.681,416.536,269.51,427.501,200.695z"/>
</svg>
</span>
</a>
<a href="https://instagram.com/INSTAGRAMUSERNAME">
<span class="icon icon--tumblr">
<svg viewBox="0 0 97.395 97.395">
<path fill="#828282" d="M12.501,0h72.393c6.875,0,12.5,5.09,12.5,12.5v72.395c0,7.41-5.625,12.5-12.5,12.5H12.501C5.624,97.395,0,92.305,0,84.895
V12.5C0,5.09,5.624,0,12.501,0L12.501,0z M70.948,10.821c-2.412,0-4.383,1.972-4.383,4.385v10.495c0,2.412,1.971,4.385,4.383,4.385
h11.008c2.412,0,4.385-1.973,4.385-4.385V15.206c0-2.413-1.973-4.385-4.385-4.385H70.948L70.948,10.821z M86.387,41.188h-8.572
c0.811,2.648,1.25,5.453,1.25,8.355c0,16.2-13.556,29.332-30.275,29.332c-16.718,0-30.272-13.132-30.272-29.332
c0-2.904,0.438-5.708,1.25-8.355h-8.945v41.141c0,2.129,1.742,3.872,3.872,3.872h67.822c2.13,0,3.872-1.742,3.872-3.872V41.188
H86.387z M48.789,29.533c-10.802,0-19.56,8.485-19.56,18.953c0,10.468,8.758,18.953,19.56,18.953
c10.803,0,19.562-8.485,19.562-18.953C68.351,38.018,59.593,29.533,48.789,29.533z"/>
</svg>
</span>
</a>
<a href="FEEDLINK">
<span class="icon icon--rss">
<svg viewBox="0 0 24.332 24.332">
<path fill="#828282" d="M3.607,17.11C1.618,17.11,0,18.726,0,20.717c0,1.984,1.618,3.604,3.607,3.604s3.607-1.619,3.607-3.604
C7.214,18.726,5.596,17.11,3.607,17.11z"/>
<path fill="#828282" d="M0.375,7.951C0.169,7.951,0,8.12,0,8.328v4.578c0,0.206,0.169,0.374,0.375,0.374c5.879,0,10.665,4.784,10.665,10.665
c0,0.205,0.166,0.375,0.375,0.375h4.581h0.016c0.209,0,0.377-0.17,0.377-0.375l-0.018-0.117
C16.305,15.064,9.152,7.951,0.375,7.951z"/>
<path fill="#828282" d="M24.311,23.828C24.246,10.681,13.531,0.01,0.375,0.01C0.169,0.01,0,0.179,0,0.387v4.711c0,0.207,0.169,0.375,0.375,0.375
c10.186,0,18.472,8.287,18.472,18.473c0,0.205,0.168,0.375,0.373,0.375h4.713h0.02c0.205,0,0.379-0.17,0.379-0.375L24.311,23.828z
"/>
</svg>
</span>
</a>
</div>
</li>
</script>
CSS and Mobile CSS:
.site-links-divider{
height:1px;
border-top: 1px solid #e9e9e9;
float: left;
width: 100%;
margin: 3px 0px;
}
.social-media-list{
padding: 5px 0px;
}
.social-media-list a {
display: initial !important;
}
.icon > svg {
display: inline-block;
width: 22px;
height: 22px;
vertical-align: middle;
}
