Git-Mirrors/privacyguides.org
1
0
Fork 0
mirror of https://github.com/privacyguides/privacyguides.org.git synced 2024-12-29 17:36: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 id="navbar">
<nav class="fixed-top bg-dark">
<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 />
<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">
<a class="nav-anchor" href="/index.html">
<span id="nav-home" class="fas fa-home fa-fw"></span>
@ -142,5 +142,5 @@
</div>
</div>
</nav>
</div>
</div>
</nav>

3
assets/css/style.scss
View File

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