nastavljena fiksna velikost ikone hamburger menija

index.html

@@ -14,6 +14,9 @@
             <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
+        <button class="hamburger_meni" type="button" aria-label="Odpri meni" aria-expanded="false">
+            <i class="fa-solid fa-bars"></i>
+        </button> <! aria-expanded nam bo povedal ali je meni odprt ali zaprt, zdej po defultu mam ob nalozitvi strani meni zaprt, zato =false, ostlao urejamo v js >
         <ul class="main_menu">
             <li><a class="active" href="index.html"><i class="fa-solid fa-house"></i>Domov</a></li>
             <li><a href="jedilnik.html"><i class="fa-solid fa-utensils"></i>Jedilnik</a></li>
@@ -21,9 +24,6 @@
             <li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
             <li><a href="o_nas.html"><i class="fa-solid fa-circle-info"></i>O nas</a></li>
         </ul>
-        <a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
-            <i class="fa-solid fa-bars"></i>
-        </a>
     </nav>
 </header>
     <main class="home_page">
@@ -85,5 +85,6 @@
     </address>
     <p>© 2026 Iva Friedrich</p>
     </footer>
+    <script src="js/navigacija.js"></script>
 </body>
 </html>

jedilnik.html

@@ -289,5 +289,7 @@
     </address>
     <p>© 2026 Iva Friedrich</p>
     </footer>
+    <script src="js/jedilnik.js"></script>
+    <script src="js/navigacija.js"></script>
 </body>
 </html>

js/navigacija.js

@@ -0,0 +1,13 @@
+const hamburger = document.querySelector (".hamburger_meni"); /* naredim spremenljivko hamburger, preišve celoten dokument HRML in poisce prvi item z razredom .hamburger_meni, shrani referenco na prvi element v html ki ima ta razred */
+const meni = document.querySelector (".main_menu"); /*enako kot hamburger le da tukaj iscem prvi element s classom main_menu */
+const ikona = hamburger.querySelector("i"); /*tole bomo pa dodali da se bo spremenila ikona v x */
+
+hamburger.addEventListener ("click", function (){ /*addEventListener je metoda za poslušanje dogodka, click je pa dogodek */
+    meni.classList.toggle ("odprt"); /*classList predstavlja elemente CSS razreda, toglle pa ta element (odprt) dodaja/odstranja */
+    const odprt = meni.classList.contains ("odprt"); /*spet nardimo spremenljivko, ki ji dodamo vrednost true ali false glede na to ali je meni odprt/zaprt (preverja ali je dodan pri classu main_meni odprt) */
+    ikona.classList.toggle("fa-bars", !odprt); /*zdaj pa ko je odprt je prikazan x, zaprt (!odprt) pa tri crtice */
+    ikona.classList.toggle("fa-xmark", odprt);
+    hamburger.setAttribute ("aria-expanded", String(odprt)); /*setAtribute spremeni vrednost HTML atributa, v tem primeru arial-expanded iz false v true in obratno, string pa pretvori true/false v besedilo "true"/"false" in posodobi atribut.*/
+    hamburger.setAttribute ("aria-label", odprt ? "Zapri meni" : "Odpri meni"); /*gledr na to ali je odprt true ali false se bo spremenil zapis (za tiste ki imajo ne morejo videti treh crtic) v odprt meni ali zaprt meni */
+});
+

o_nas.html

@@ -106,5 +106,6 @@
     </address>
     <p>© 2026 Iva Friedrich</p>
     </footer>
+    <script src="js/navigacija.js"></script>
 </body>
 </html>

recepti.html

@@ -274,5 +274,7 @@
     </address>
     <p>© 2026 Iva Friedrich</p>
     </footer>
+    <script src="js/jedilnik.js"></script>
+    <script src="js/navigacija.js"></script>
 </body>
 </html>

rezervacija.html

@@ -140,5 +140,7 @@
     </address>
     <p>© 2026 Iva Friedrich</p>
     </footer>
+    <script src="js/rezervacija.js"></script>
+    <script src="js/navigacija.js"></script>
 </body>
 </html>

stylesheet.css

@@ -865,6 +865,8 @@ footer p {
         align-items: center;
         justify-content: center;
         margin-left: auto;
+        width: 2.5rem;  /* Fiksna širina gumba */
+        height: 2.5rem; /* Fiksna višina gumba */
         padding: 0.6rem;
         border: 0;
         border-radius: 0.4rem;