pufereq/kursy-mirror
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(header.html): make header sticky on desktop

Browse Source
This commit is contained in:
Artur Borecki
2026-03-19 18:11:14 +01:00
parent acb6ea58ce
commit c789eeb4ff
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
kursy/templates/header.html
View File

@@ -1,12 +1,12 @@
{% load i18n wagtailcore_tags %}
<header class="bg-blue-900 text-white shadow-md relative">
<header class="bg-blue-900 text-white shadow-md lg:sticky top-0 z-40">
<div class="container mx-auto flex items-center justify-between py-4 px-6">
{% wagtail_site as current_site %}
<div class="flex items-center gap-4">
<nav class="flex items-center gap-4">
<a class="text-xl font-bold" href="/">{{ current_site.site_name }}</a>
<a href="{% slugurl 'courses' %}" class="hover:underline">{% trans "Courses" %}</a>
<a href="{% url 'calendar' %}" class="hover:underline">{% trans "Course Calendar" %}</a>
</div>
</nav>
<nav class="flex items-center gap-4">
{% if user.is_authenticated %}
@@ -31,8 +31,8 @@
</div>
<div class="container mx-auto px-6 mb-2 md:mb-0">
<form action="{% url 'search' %}" method="get" class="flex items-center bg-blue-950 rounded-md md:w-auto md:absolute md:left-1/2 md:top-1/2 md:transform md:-translate-x-1/2 md:-translate-y-1/2 md:mt-0">
<input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-md px-3 py-2 w-full md:w-auto focus:outline-none">
<form action="{% url 'search' %}" method="get" class="flex items-center bg-blue-950 rounded-md mb-2 lg:w-auto lg:absolute lg:left-1/2 lg:top-1/2 lg:transform lg:-translate-x-1/2 lg:-translate-y-1/2 lg:mt-0">
<input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-lg px-3 py-2 w-full lg:w-auto focus:outline-none">
<button type="submit" class="bg-white text-blue-900 rounded-md px-3 py-2 hover:bg-gray-200 transition"><i class="fi fi-br-search"></i></button>
</form>
</div>