Git-Mirrors/privacyguides.org
1
0
Fork 0
mirror of https://github.com/privacyguides/privacyguides.org.git synced 2025-01-01 10:56:28 -05:00
Code Issues Packages Projects Releases Wiki Activity

Layout mobile navbar nicely with Flexbox (#1497)

Browse Source 
Before hamburger menu was floated to the right with a fixed margin-top,
which means that it probably wasn't perfectly centered and if we would
change logo image size, we would have to edit that margin manually.
This commit is contained in:
Dawid Potocki 2019-11-17 07:46:29 +00:00 committed by Jonah Aragon
parent ec9f97f043
commit d527ccd8f5
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
_includes/nav.html
View File

@ -1,14 +1,14 @@
<div class="fixed-top bg-dark"> <nav class="fixed-top bg-dark">
<nav id="navbar"> <div id="navbar" class="d-flex flex-wrap justify-content-between align-items-center">
<div class="w-50">
<a id="nav-home-mobile" class="nav-anchor" href="/index.html">
<img src="/assets/img/layout/logo_smaller.png" width="150px" />
</a>
</div>
<input type="checkbox" id="nav-toggle" checked /> <input type="checkbox" id="nav-toggle" checked />
<label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label> <label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label>
<a id="nav-home-mobile" class="nav-anchor" href="/index.html">
<img src="/assets/img/layout/logo_smaller.png" width="148px" height="22px" />
</a>
<div class="menu">
<div class="menu w-100">
<div id="nav-left" class="position-relative flex-col"> <div id="nav-left" class="position-relative flex-col">
<a class="nav-anchor" href="/index.html"> <a class="nav-anchor" href="/index.html">
<span id="nav-home" class="fas fa-home fa-fw"></span> <span id="nav-home" class="fas fa-home fa-fw"></span>
@ -142,5 +142,5 @@
</div> </div>
</div> </div>
</nav> </div>
</div> </nav>

3
assets/css/style.scss
View File

@ -340,8 +340,7 @@ input#nav-toggle,
input#nav-toggle + label { input#nav-toggle + label {
display: block; display: block;
cursor: pointer; cursor: pointer;
margin-top: 0.25rem; margin-bottom: 0;
float: right;
} }
.nav-dropdown { .nav-dropdown {
display: block; display: block;