From a45830cf25ecfbabd8aec52ca0f1a1956e07edda Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 21 Apr 2026 05:42:24 +0000
Subject: [PATCH] fix: keep mobile header title aligned when navbar menu
 expands

Agent-Logs-Url: https://github.com/dsaub/proyecto-final/sessions/8f4a8d58-4e90-48ad-8195-23b90d8b22d4

Co-authored-by: dsaub <54474838+dsaub@users.noreply.github.com>
---
 tienda/static/css/custom.css |  3 ++-
 tienda/tests.py              | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/tienda/static/css/custom.css b/tienda/static/css/custom.css
index 5a77645..eaac49c 100644
--- a/tienda/static/css/custom.css
+++ b/tienda/static/css/custom.css
@@ -63,8 +63,9 @@ p.price {
 .navbar.header .site-title-mobile {
   color: #FFF;
   position: absolute;
+  top: calc(var(--bs-navbar-padding-y) + 20px);
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
   margin: 0;
   max-width: calc(100% - 9rem);
   overflow: hidden;
diff --git a/tienda/tests.py b/tienda/tests.py
index 2c0b210..c7606ba 100644
--- a/tienda/tests.py
+++ b/tienda/tests.py
@@ -1,4 +1,5 @@
 import json
+from pathlib import Path
 from unittest.mock import MagicMock, patch
 
 from django.test import TestCase, override_settings
@@ -1371,6 +1372,20 @@ class EndpointViewTests(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertContains(response, 'site-title-mobile d-md-none')
         self.assertContains(response, 'site-title-desktop')
+
+    def test_mobile_site_title_css_keeps_title_pinned_to_header_row(self):
+        css_path = Path(__file__).resolve().parent / "static" / "css" / "custom.css"
+        css_content = css_path.read_text(encoding="utf-8")
+
+        rule_start = css_content.find(".navbar.header .site-title-mobile")
+        self.assertNotEqual(rule_start, -1)
+
+        rule_end = css_content.find("}", rule_start)
+        self.assertNotEqual(rule_end, -1)
+        rule_block = css_content[rule_start:rule_end]
+
+        self.assertIn("top: calc(var(--bs-navbar-padding-y) + 20px);", rule_block)
+        self.assertIn("transform: translate(-50%, -50%);", rule_block)
     def test_home_mobile_welcome_title_centered(self):
         response = self.client.get(reverse("home"))
         html = response.content.decode()