إختفاء وظهور عناصر القائمة العلوية navbar فجأه

اقتباس

1- عند الضغط عل الزر تظهر العناصر وتختفي فجاه وتظهر في الجانب الاخر من الشاشة وليس تحت الزر لم استطع حل المشكلة  

سبب مشكلة ظهور واختفاء القائمة هو أنك قمت بإعطاء كلاس show  تنسيق يجعل من القائمة تختفي position: absolute

.show {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}

فقط قم بحذف position: absolute; وسوف تبقى القائمة ظاهرة ولن تختفي لن يكون لحذفها أي تأثير على الصفحة 

اقتباس

2- طبقه ال overlay اريدها كما بالصورة المرفقة اظنها تراكب لشكلين ولكن لم تنجح معي حيث انها متصلة من اليمين لليسار مع اختلاف ارتفاع الطبقة

لقد قمت بضبط طبقة overlay بتعديل على خاصية transform وإضافة خاصية  margin-top على كلاس overlay

.overlay {
    position: fixed;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0px;
    right: 0px;
    z-index: -1;
    margin-top: 150px;
    transform: skew(100deg,40deg);
}

مرفق ملفات المشروع مع التعديلات 

templete_1.zip