Mentor Template - Change Link in Navigation to Icon

Hi Guys,

I'm trying to replace the last two items in my main nav with Icons.

I did it before with the "Five" template and I used this code:

<script>
$("nav#main-navigation > ul > li:nth-last-child(1) a").replaceWith($(iconEN));
$("nav#main-navigation > ul > li:nth-last-child(2) a").replaceWith($(iconDE));
</script>

The problem is that I can't use the same code with the "Mentor" template since the structure seems to be different from "Five"

If I inspect the main nav on my "Mentor" template it shows something like this:

<a href="#" class="Header-nav-item">DE</a>

Can you guys help me with figuring out how I need to change my code so it works for the "Mentor" template?

All the best

Feingeist

I got it to work with this code:

<img id="iconEN" src="/s/ENgreyNewVer1.svg" title="Englisch" onclick="switchLang('en');" style="cursor: pointer; margin-top:10px; margin-left:15px; height:20px; width:30px;"/>
                                                                                     
<img id="iconDE" src="/s/DEgreyNewVer1.svg" title="Deutsch" onclick="switchLang('de');" style="cursor: pointer; margin-top:10px; margin-left:10px; height:20px; width:30px;"/>
  
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<script>
$("a.Header-nav-item:nth-last-child(1)").replaceWith($(iconEN));
$("a.Header-nav-item:nth-last-child(2)").replaceWith($(iconDE));
</script>

The only problem seems to be the margins seem to not to anything. I need to align the icons to the rest of the navigation 😕

I figured the margin problems out by using this instead:

position:relative; top:4px;