codeberg-wownero/wownero.org-website
1
0
Fork 0
mirror of https://codeberg.org/wownero/wownero.org-website.git synced 2026-10-17 05:41:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace mobile hamburger nav with fixed bottom nav bar

Browse Source 
Modern bottom navigation bar for mobile with MEMES, CODE, WALLETS
and LANG dropup. Always visible, no hamburger toggle needed.
Matches the gradient style of the top navbar.
This commit is contained in:
jwinterm
2026-03-19 14:52:18 -04:00
parent 5af9e11f43
commit 32939f6d3b
2 changed files with 74 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/main.css
+55
View File
@@ -386,6 +386,7 @@ footer {
background: #1a1a1a;
width: 100%;
overflow: hidden;
padding-bottom: 50px;
}
footer ul.list-unstyled {
@@ -492,6 +493,60 @@ footer ul.list-unstyled {
background-color: #ffc608 !important;
color: #3d3d3d !important;
}
/* ==========================================================================
Mobile Bottom Nav
========================================================================== */
.mobile-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1030;
display: flex;
justify-content: space-around;
align-items: center;
background: rgb(255, 42, 212);
background: linear-gradient(90deg, rgba(255, 42, 212, 1) 0%, rgba(255, 204, 0, 1) 100%);
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
padding: 8px 0;
}
.mobile-bottom-nav-item {
color: #fff !important;
font-family: roboto, sans-serif;
font-weight: 900;
font-size: 13px;
text-decoration: none !important;
text-align: center;
flex: 1;
padding: 4px 0;
}
.mobile-bottom-nav-item:hover,
.mobile-bottom-nav-item:active {
color: #fff !important;
text-decoration: none !important;
}
.mobile-bottom-nav-link {
color: #fff !important;
font-family: roboto, sans-serif;
font-weight: 900;
font-size: 13px;
text-decoration: none !important;
}
.mobile-bottom-nav-link:hover,
.mobile-bottom-nav-link:active {
color: #fff !important;
text-decoration: none !important;
}
.mobile-bottom-nav .dropup .dropdown-menu {
margin-bottom: 10px;
}
.sub-footer {
background: rgb(255, 42, 212);
background: linear-gradient(90deg, rgba(255, 42, 212, 1) 0%, rgba(255, 204, 0, 1) 100%);
index.html
+11 -19
View File
@@ -35,8 +35,8 @@
<a class="navbar-brand text-center d-none d-lg-inline-block" href="#">
<img src="img/Wownero_Brand_Mono.svg" alt="Wownero Brand" width="220px">
</a>
<a class="navbar-brand-two text-center d-lg-none d-inline-block">
<img src="img/Wownero_Brand_Mono.svg" alt="Wownero Logo" class="navbar-toggler" height="48" data-toggle="collapse" data-target="#myNavbar">
<a class="navbar-brand-two text-center d-lg-none d-inline-block" href="#">
<img src="img/Wownero_Brand_Mono.svg" alt="Wownero Logo" height="48">
</a>
</div>
<div class="d-none d-lg-block">
@@ -65,20 +65,15 @@
</ul>
</div>
</div>
<div class="d-lg-none">
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="https://suchwow.xyz/" class="myButton-mobile-nav" id="m-navmeme">MEMES</a>
</li>
<li class="nav-item">
<a href="https://codeberg.org/wownero/" class="myButton-mobile-nav" id="m-navcode">CODE</a>
</li>
<li class="nav-item">
<a href="#wallets" class="myButton-mobile-nav" id="walletss">WALLETS</a>
</li>
<li class="nav-item dropdown">
<a class="myButton-mobile-nav dropdown-toggle" href="#" id="langDropdownMobile" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">LANG</a>
</nav>
<!-- Mobile bottom nav bar -->
<nav class="mobile-bottom-nav d-lg-none">
<a href="https://suchwow.xyz/" class="mobile-bottom-nav-item" id="m-navmeme">MEMES</a>
<a href="https://codeberg.org/wownero/" class="mobile-bottom-nav-item" id="m-navcode">CODE</a>
<a href="#wallets" class="mobile-bottom-nav-item" id="m-walletss">WALLETS</a>
<div class="mobile-bottom-nav-item dropup">
<a href="#" class="mobile-bottom-nav-link" id="langDropdownMobile" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">LANG</a>
<div class="dropdown-menu" aria-labelledby="langDropdownMobile">
<a class="dropdown-item" href="#" onclick="translate('en-US'); return false;">English</a>
<a class="dropdown-item" href="#" onclick="translate('fr-FR'); return false;">Fran&#231;ais</a>
@@ -87,9 +82,6 @@
<a class="dropdown-item" href="#" onclick="translate('pt-BR'); return false;">Portugu&#234;s (BR)</a>
<a class="dropdown-item" href="#" onclick="translate('pt-PT'); return false;">Portugu&#234;s (PT)</a>
</div>
</li>
</ul>
</div>
</div>
</nav>