The simplest way of achieving this is via CSS – having a media query that shows the Google maps link only at mobiles screen size . The following media query will hide the li with the maps-link class for any screen size 768px and up.

You can see this in action here by viewing the snippet below (equivalent to small screen in which you will see the maps link since the width is not wide enough to match the media query…. then clicking the “full-screen” link to toggle to full screen and now the maps link will not show – because the width is wide enough totrigger the media query.

Also note that li’s are children of a ul element – not a div.

And that rather than creating two seaprate nav lists – one for phone and one for not-phone… it is better to have a single list and style it accordingly for different viewports.

@media only screen and (min-width: 768px) {
  .maps-link {
   display: none;
  }
}

<nav>
  <ul class="nav-links">
    <li><a href="./index.html">Αρχική</a></li>
    <li><a href="./products.html">Προϊόντα</a></li>
    <li><a href="./photos.html">Φωτογραφίες</a></li>
    <li class="maps-link"><a href="./maps.html">Google maps</a></li>
  </ul>
</nav>

I have created this nav with a div who has those li inside

<nav>
    <div class="nav-links">
                <li><a href="./index.html">Αρχική</a></li>
                <li><a href="./products.html">Προϊόντα</a></li>
                <li><a href="./photos.html">Φωτογραφίες</a></li>
    </div>
</nav>

Also, I have created a “burger” div that functions as a button, when someone is on phone, and whenever you click on it, it shows Αρχική,Προϊόντα,Φωτογραφίες.

<div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
</div>

However whenever someone is on phone and clicks on it I want to have one more li called “Google Maps”.
Is there anyway I can do this using Javascript?