mobile navbar fix progress
This commit is contained in:
parent
8a543b2d5f
commit
c75f09391d
@ -50,7 +50,7 @@
|
||||
|
||||
function showHamburger() {
|
||||
document.getElementById('header-container').className = "overflow-hidden";
|
||||
document.getElementById('hamburger').className = "absolute mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
|
||||
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
|
||||
document.getElementById('hamburger-btn').className = "hidden md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
|
||||
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
|
||||
}
|
||||
@ -173,12 +173,12 @@
|
||||
From: "opacity-100 scale-100"
|
||||
To: "opacity-0 scale-95"
|
||||
-->
|
||||
<div id="hamburger" class="hidden absolute mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden">
|
||||
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden">
|
||||
<div>
|
||||
<div class="shadow-xs bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8">
|
||||
|
||||
<nav class="flex justify-around">
|
||||
<nav class="flex flex-col justify-around">
|
||||
|
||||
{% for header_item in header_items %}
|
||||
{% if not loop.first %}
|
||||
@ -203,6 +203,19 @@
|
||||
-->
|
||||
</button>
|
||||
</div>
|
||||
{% set header_menu = header_arr[1] %}
|
||||
|
||||
<nav>
|
||||
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
|
||||
|
||||
<div id="{{menu_id}}" class="z-50 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 absolute inset-x-0 transform shadow-lg md:backdrop-blur lg:backdrop-blur xl:backdrop-blur hidden ease-in opacity-0 -translate-y-1">
|
||||
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
|
||||
<div class="mx-8 lg:mx-20 xl:mx-20 px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
|
||||
{{header_menu | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
@ -60,7 +60,6 @@ Parameters:
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
Reference in New Issue
Block a user