Fix top spacing of nav dropdowns on m0b1le

CHANGELOG.md

@@ -88,8 +88,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Display pointer cursor if image is wrapped in a link.
 - Don't add `::before` pseudo element to color pickers.
 - Fix images being covered by other images in some scenarios.
-- Load auto-menu-close script if navbar sublinks are present.
+- Fix top spacing of navbar dropdowns on mobile.
 - Fix videos and iframes having rounded corners and edge highlight in fullscreen.
+- Load auto-menu-close script if navbar menus are present.
 
 ## [4.8.0](https://codeberg.org/daudix/duckquill/compare/v4.7.1...v4.8.0)
 

sass/_nav.scss

@@ -189,9 +189,13 @@
 						opacity: 0;
 					}
 				}
+			}
 
-				@media only screen and (max-width: 480px) {
-					@keyframes dropdown-open {
+			@media only screen and (max-width: 480px) {
+				&[open]:has(summary:not(.circle)) ul {
+					animation: dropdown-open-2 var(--transition);
+
+					@keyframes dropdown-open-2 {
 						from {
 							transform: translate(-50%, -0.5rem);
 							opacity: 0;
@@ -215,10 +219,6 @@
 				background-color: var(--nav-bg);
 				padding: 0.25rem;
 
-				@media only screen and (max-width: 480px) {
-					transform: translate(-50%, 0.5rem);
-				}
-
 				li {
 					width: 100%;
 					white-space: nowrap;
@@ -229,6 +229,12 @@
 					}
 				}
 			}
+
+			@media only screen and (max-width: 480px) {
+				&:has(summary:not(.circle)) ul {
+					transform: translate(-50%, 0.5rem);
+				}
+			}
 		}
 
 		#search .icon {