مشكلة في الوصول إلى ملف CSS و تنسيق القائمة العلوية

أولاً لنقوم بمعالجة المشاكل التي تتعلق في الوصول إلى ملف style.css والصور 

الطريقة الصحيحة للوصول لملف style.css كالتالي 

<link rel="stylesheet" href="css/style.css">

بدلاً من ، كون لا يوجد ملف  New folder (3)  داخل ملف css , images  

<link rel="stylesheet" href="../New folder (3)/css/style.css">

وكذلك الصور الطريقة الصحيحة هكذا . 

<img src="images/bakery-light-1.png" alt="img">

أما فيما يتعلق في جعل navbar تأخذ القيمة fixed كالتالي ، نذهب لملف style.css ونعطي الكلاس navbar الخاصية position:fixed 

nav .navbar{ 
    width: 70%;
    position: fixed;
}

ثم لنعطيه خلفية سوداء بعد التحرك في scroll للأسفل ، أولاً لنقوم بتضمين jquery هكذا في أسفل الصفحة . 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

ثم نضيف الكود البرمجي التالي 

<script type="text/javascript">
  $(window).scroll(function () {
        if ($(window).scrollTop() > 400) {
            $(".navbar").css("background-color","black");
        } else {
            $(".navbar").css("background-color","rgba(16, 22, 54, 0.2)");
        }
    });
</script>

لك الحرية في وضعه أسفل الصفحة أو إضافته في ملف جافا سكربت خاص مع الوصول للملف بشكل صحيح .