JQuery nawigacja mobilna

Question

Witam! Na mojej stronie internetowej umieściłem taką nawigację:

    <nav>
        <ol>
            <li><div class="hide-nav"><i class="fas fa-bars"></i></div></li>
            <li><a href=""><?php echo $language['home']; ?></a></li>
            <li><a href=""><?php echo $language['pics']; ?></a></li>
            <li><a href=""><?php echo $language['videos']; ?></a></li>
            <li><a href=""><?php echo $language['guestbook']; ?></a></li>
            <li><a href=""><?php echo $language['offer']; ?></a></li>
            <li><a href=""><?php echo $language['contact']; ?></a></li>
        </ol>
    </nav>

I potrzebuję z użyciem JQuery wykryć czy urządzenie jest mobilne czy nie, jeśli tak to nadać nawigacji klasę np. mobile-nav, a jeśli ktoś kliknie diva o klasie hide-nav (który będzie widoczny tylko na urządzeniu mobilnym) "przełączać" jego html pomiędzy 

<i class="fas fa-bars"></i>

 i

<i class="fas fa-ellipsis-h"></i>

oraz ukryć nawigację. Jeśli ktoś ma jakiś pomysł jak to zrobić bardzo proszę o odpowiedź.

Answer 1

użyj do cego css'a za pomocą @media queries możesz ustawić przy jakiej rozdzielczości ma się pokazywać jakie menu.