jarvis/componentowl-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hamburger menu for mobile, fix overflow

Browse Source
This commit is contained in:
Jarvis Prime
2026-03-24 04:34:12 +00:00
parent 0dc2cd7ccc
commit ef1973fa12
1 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/layouts/Base.astro
View File

@@ -388,9 +388,17 @@ const isHome = currentPath === '/';
/* === RESPONSIVE HELPERS === */
@media (max-width: 960px) {
.d-placing { width: 95%; padding: 0 10px; }
.d-menu { flex-wrap: wrap; justify-content: center; gap: 2px; display: flex; list-style: none; }
.d-menu li { margin: 0; float: none; padding-right: 8px; }
.d-menu .menu-item { font-size: 12px; padding: 4px 6px; }
/* Hamburger menu */
.hamburger { display: block; cursor: pointer; padding: 8px; position: absolute; right: 10px; top: 8px; z-index: 101; }
.hamburger span { display: block; width: 22px; height: 2px; background: #bb983b; margin: 5px 0; transition: 0.3s; }
.d-header { position: relative; }
.d-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #3a2c18; z-index: 100; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.d-menu.open { display: flex; }
.d-menu li { float: none; padding: 0; margin: 0; }
.d-menu .menu-item { display: block; padding: 10px 20px; font-size: 14px; border-bottom: 1px solid #4a3c28; }
.d-menu .menu-item:hover { background: #4a3c28; }
.d-menu .with-dropdown .dropdown { display: none; }
.d-logo { display: none; }
.d-footer .left, .d-footer .right { float: none; width: 100%; }
.product-content .right { width: 100%; float: none; }
.product-content .left { width: 100%; float: none; }
@@ -403,27 +411,20 @@ const isHome = currentPath === '/';
.buttons-hp-vertical { float: none; margin: 15px auto; }
.home-static .list-l, .home-static .list-r { float: none; width: 100%; }
.owl-flag { display: none; }
/* Responsive images */
img { max-width: 100%; height: auto; }
/* Tables */
table { max-width: 100%; overflow-x: auto; display: block; }
/* Pricing tables */
.pricing-table { width: 100%; }
.pricing-table td, .pricing-table th { padding: 6px 8px; font-size: 13px; }
/* Comics grid */
.comics-grid { grid-template-columns: 1fr; }
/* Footer */
.d-footer .latest-posts { height: auto; }
.d-footer .news .news-item { width: 100%; }
/* General text */
.d-content-wrap { word-wrap: break-word; overflow-wrap: break-word; }
/* Sidebar links */
.product-content .right ul { padding-left: 15px; }
/* Prevent horizontal overflow */
.d-page { overflow-x: hidden; }
.d-content-wrap { overflow-x: hidden; }
}
@media (max-width: 480px) {
.d-header { padding: 10px 5px; }
.d-menu .menu-item { font-size: 11px; padding: 3px 4px; }
.d-menu li { padding-right: 4px; }
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
@@ -431,6 +432,9 @@ const isHome = currentPath === '/';
.d-footer .social a { font-size: 12px; }
.buttons-hp a, .buttons-hp-vertical a { display: block; margin: 5px 0; text-align: center; }
}
@media (min-width: 961px) {
.hamburger { display: none; }
}
</style>
</head>
<body class={isHome ? 'd-homepage' : ''}>
@@ -438,6 +442,9 @@ const isHome = currentPath === '/';
<!-- Header -->
<div class="d-header d-placing">
<div class="hamburger" onclick="document.querySelector('.d-menu').classList.toggle('open')">
<span></span><span></span><span></span>
</div>
<ul class="d-menu">
<li class={currentPath === '/' ? 'active' : ''}>
<a href="/" class="menu-item">Home</a>