diff --git a/packages/ui/components/Navbar.wrn b/packages/ui/components/Navbar.wrn
index 939b19b9..1a4a2173 100644
--- a/packages/ui/components/Navbar.wrn
+++ b/packages/ui/components/Navbar.wrn
@@ -416,12 +416,17 @@ size: string = "default"
 
     .wrn-navbar__menus {
       position: absolute;
-      left: 50%;
+      right: 0;
+      left: 0;
       justify-content: center;
-      transform: translateX(-50%);
+      pointer-events: none;
       gap: 0.25rem;
     }
 
+    .wrn-navbar__menus > * {
+      pointer-events: auto;
+    }
+
     .wrn-navbar__actions {
       justify-content: flex-end;
       gap: 0.5rem;
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index c28e2d6a..2bdcddcd 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -3137,8 +3137,8 @@ test("navbar uses a valid aria-current and takes roving focus on its menu", asyn
    */
   expect(source).not.toContain("? 'page' : ''");
   expect(source).toContain("data-wrn-roving");
-  expect(source).toContain("left: 50%;");
-  expect(source).toContain("transform: translateX(-50%);");
+  expect(source).toContain("pointer-events: none;");
+  expect(source).toContain(".wrn-navbar__menus > *");
 
   const html = await renderComponent(source, {
     label: "Main",