Nav - external link icon

In "Dev Mode" - expand Header/Footer and within header-footer.css I put the following at the end of the file:

span.nav-item-text[data-link-text='Ngā Rongorongo | News']::after,span.nav-item-text[data-link-text='Putanga Pāpāho | Media Releases']::after

{

content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiAgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBmaWxsPSIjYjdjZTJkIiBkPSJNMzIwIDBjLTE3LjcgMC0zMiAxNC4zLTMyIDMyczE0LjMgMzIgMzIgMzJsODIuNyAwTDIwMS40IDI2NS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDQ0OCAxMDkuM2wwIDgyLjdjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMmwwLTE2MGMwLTE3LjctMTQuMy0zMi0zMi0zMkwzMjAgMHpNODAgMzJDMzUuOCAzMiAwIDY3LjggMCAxMTJMMCA0MzJjMCA0NC4yIDM1LjggODAgODAgODBsMzIwIDBjNDQuMiAwIDgwLTM1LjggODAtODBsMC0xMTJjMC0xNy43LTE0LjMtMzItMzItMzJzLTMyIDE0LjMtMzIgMzJsMCAxMTJjMCA4LjgtNy4yIDE2LTE2IDE2TDgwIDQ0OGMtOC44IDAtMTYtNy4yLTE2LTE2bDAtMzIwYzAtOC44IDcuMi0xNiAxNi0xNmwxMTIgMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkw4MCAzMnoiLz48L3N2Zz4=) !important;

margin-left:0.5rem !important;

}

@media (min-width:768px) {

span.nav-item-text[data-link-text='Ngā Rongorongo | News']::after,

span.nav-item-text[data-link-text='Putanga Pāpāho | Media Releases']::after {

content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiAgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBmaWxsPSIjOTM5NTk3IiBkPSJNMzIwIDBjLTE3LjcgMC0zMiAxNC4zLTMyIDMyczE0LjMgMzIgMzIgMzJsODIuNyAwTDIwMS40IDI2NS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDQ0OCAxMDkuM2wwIDgyLjdjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMmwwLTE2MGMwLTE3LjctMTQuMy0zMi0zMi0zMkwzMjAgMHpNODAgMzJDMzUuOCAzMiAwIDY3LjggMCAxMTJMMCA0MzJjMCA0NC4yIDM1LjggODAgODAgODBsMzIwIDBjNDQuMiAwIDgwLTM1LjggODAtODBsMC0xMTJjMC0xNy43LTE0LjMtMzItMzItMzJzLTMyIDE0LjMtMzIgMzJsMCAxMTJjMCA4LjgtNy4yIDE2LTE2IDE2TDgwIDQ0OGMtOC44IDAtMTYtNy4yLTE2LTE2bDAtMzIwYzAtOC44IDcuMi0xNiAxNi0xNmwxMTIgMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkw4MCAzMnoiLz48L3N2Zz4=);

margin-left:1rem !important;

}

}

.dmUDNavigationItem_010101352165 span.nav-item-text[data-link-text='Ngā Rongorongo | News']::after

{

content:none !important;

margin-left:0 !important;

}

/* 22 November 2024 - Eric adding to put external link icons in nav */

/* Convert SVGs to Base64 - https://www.fffuel.co/eeencode/ */

/* MOBILE - Lime green by default */

span.nav-item-text[data-link-text='News']::after,

span.nav-item-text[data-link-text='Media']::after

{

/*

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="16" width="16"><path fill="#b7ce2d" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>

*/

content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiAgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBmaWxsPSIjYjdjZTJkIiBkPSJNMzIwIDBjLTE3LjcgMC0zMiAxNC4zLTMyIDMyczE0LjMgMzIgMzIgMzJsODIuNyAwTDIwMS40IDI2NS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDQ0OCAxMDkuM2wwIDgyLjdjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMmwwLTE2MGMwLTE3LjctMTQuMy0zMi0zMi0zMkwzMjAgMHpNODAgMzJDMzUuOCAzMiAwIDY3LjggMCAxMTJMMCA0MzJjMCA0NC4yIDM1LjggODAgODAgODBsMzIwIDBjNDQuMiAwIDgwLTM1LjggODAtODBsMC0xMTJjMC0xNy43LTE0LjMtMzItMzItMzJzLTMyIDE0LjMtMzIgMzJsMCAxMTJjMCA4LjgtNy4yIDE2LTE2IDE2TDgwIDQ0OGMtOC44IDAtMTYtNy4yLTE2LTE2bDAtMzIwYzAtOC44IDcuMi0xNiAxNi0xNmwxMTIgMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkw4MCAzMnoiLz48L3N2Zz4=");

margin-left: 0.5rem;

}

@media (min-width:768px) {

/* TABLET - Gray by default */

span.nav-item-text[data-link-text='News']::after,

span.nav-item-text[data-link-text='Media']::after

{

/*

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="16" width="16"><path fill="#939597" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>

*/

content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiAgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBmaWxsPSIjOTM5NTk3IiBkPSJNMzIwIDBjLTE3LjcgMC0zMiAxNC4zLTMyIDMyczE0LjMgMzIgMzIgMzJsODIuNyAwTDIwMS40IDI2NS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDQ0OCAxMDkuM2wwIDgyLjdjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMmwwLTE2MGMwLTE3LjctMTQuMy0zMi0zMi0zMkwzMjAgMHpNODAgMzJDMzUuOCAzMiAwIDY3LjggMCAxMTJMMCA0MzJjMCA0NC4yIDM1LjggODAgODAgODBsMzIwIDBjNDQuMiAwIDgwLTM1LjggODAtODBsMC0xMTJjMC0xNy43LTE0LjMtMzItMzItMzJzLTMyIDE0LjMtMzIgMzJsMCAxMTJjMCA4LjgtNy4yIDE2LTE2IDE2TDgwIDQ0OGMtOC44IDAtMTYtNy4yLTE2LTE2bDAtMzIwYzAtOC44IDcuMi0xNiAxNi0xNmwxMTIgMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkw4MCAzMnoiLz48L3N2Zz4=");

}

}

@media (min-width: 1024px) {

/* DESKTOP - Dark Green by default */

span.nav-item-text[data-link-text='News']::after,

span.nav-item-text[data-link-text='Media']::after

{

/*

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="16" width="16"><path fill="#36533c" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>

*/

content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiAgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBmaWxsPSIjMzY1MzNjIiBkPSJNMzIwIDBjLTE3LjcgMC0zMiAxNC4zLTMyIDMyczE0LjMgMzIgMzIgMzJsODIuNyAwTDIwMS40IDI2NS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDQ0OCAxMDkuM2wwIDgyLjdjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMmwwLTE2MGMwLTE3LjctMTQuMy0zMi0zMi0zMkwzMjAgMHpNODAgMzJDMzUuOCAzMiAwIDY3LjggMCAxMTJMMCA0MzJjMCA0NC4yIDM1LjggODAgODAgODBsMzIwIDBjNDQuMiAwIDgwLTM1LjggODAtODBsMC0xMTJjMC0xNy43LTE0LjMtMzItMzItMzJzLTMyIDE0LjMtMzIgMzJsMCAxMTJjMCA4LjgtNy4yIDE2LTE2IDE2TDgwIDQ0OGMtOC44IDAtMTYtNy4yLTE2LTE2bDAtMzIwYzAtOC44IDcuMi0xNiAxNi0xNmwxMTIgMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkw4MCAzMnoiLz48L3N2Zz4=");

}

}

​

/* ALL SIZES - White on Hover */

span.nav-item-text[data-link-text='News']:hover::after,

span.nav-item-text[data-link-text='Media']:hover::after

{

/*

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="16" width="16"><path fill="#FFFFFF" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>

*/

content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiAgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzIwIDBjLTE3LjcgMC0zMiAxNC4zLTMyIDMyczE0LjMgMzIgMzIgMzJsODIuNyAwTDIwMS40IDI2NS40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwTDQ0OCAxMDkuM2wwIDgyLjdjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMmwwLTE2MGMwLTE3LjctMTQuMy0zMi0zMi0zMkwzMjAgMHpNODAgMzJDMzUuOCAzMiAwIDY3LjggMCAxMTJMMCA0MzJjMCA0NC4yIDM1LjggODAgODAgODBsMzIwIDBjNDQuMiAwIDgwLTM1LjggODAtODBsMC0xMTJjMC0xNy43LTE0LjMtMzItMzItMzJzLTMyIDE0LjMtMzIgMzJsMCAxMTJjMCA4LjgtNy4yIDE2LTE2IDE2TDgwIDQ0OGMtOC44IDAtMTYtNy4yLTE2LTE2bDAtMzIwYzAtOC44IDcuMi0xNiAxNi0xNmwxMTIgMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkw4MCAzMnoiLz48L3N2Zz4=");

}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="16" width="16">

<path fill="#FFFFFF" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/>

</svg>​

This uses a Pseudo selector to add an external link icon after any nav items with text "News" or "Media" - if item text changes or additional icons are needed - update the CSS here accordingly.