Ik heb de navigatie van mijn website responsive gemaakt.

Ik heb 2 navigaties gemaakt, een voor desktop en een voor mobiele.

<nav class="desktop-nav">
        <!-- <img src="assets/LOGO/Logo.svg" alt="logo"> -->
        <a href="stekjes.html">STEKJES</a>
        <a href="zaden.html">ZADEN</a>
        <a href="geveltuin.html">GEVELTUIN</a>
        <a href="agenda.html">AGENDA</a>
        <a href="groene-bieb.html">GROENE BIEB</a>
        <a href="contact.html">CONTACT</a>
        <!-- <img src="assets/HARRY/HARRY.png" alt="harry"> -->
    </nav>

    <!-- MOBIELE navigatie balk iconen zonder tekst -->
    <nav class="mobiele-nav">
        <!-- <img src="assets/LOGO/Logo.svg" alt="logo"> -->
        <a href="stekjes.html"><img src="assets/BOOK/BOEK.png" alt="icon"></a>
        <a href="zaden.html"><img src="assets/BOOK/BOEK.png" alt="icon"></a>
        <a href="geveltuin.html"><img src="assets/BOOK/BOEK.png" alt="icon"></a>
        <a href="agenda.html"><img src="assets/BOOK/BOEK.png" alt="icon"></a>
        <a href="groene-bieb.html"><img src="assets/BOOK/BOEK.png" alt="icon"></a>
        <a href="contact.html"><img src="assets/BOOK/BOEK.png" alt="icon"></a>
        <!-- <img src="assets/HARRY/HARRY.png" alt="harry"> -->
    </nav>

Eentje heb ik gedeactiveerd door middel van display: none.

.mobiele-nav {
   grid-area: nav;
   background-color: #567046;

   /* bewerkt alleen de afbeeldingen binnen deze nav */
   & img {
     width: 4rem;
   }
 }

 .desktop-nav {
   display: none;
   background-color: #567046;
 }

Met 'media query' kan ik dit omwisselen. Zie onderstaande code:

 /* responsive nav */
 @media (min-width: 855px) {
   .mobiele-nav {
     display: none;
   }

   .desktop-nav {
     display: grid;
     grid-area: nav;
     background-color: #567046;
   }
 }

Met behulp van deze link:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

Website link:**

https://clarice-cod.github.io/the-client-website/

Clarice-COD / the-client-website

navigatie-balk responsive maken #8

Met behulp van deze link:

Website link:**