privacyguides/privacytools.io
Archived
1
0
Fork 0
Code Issues 304 Pull Requests 47 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 was merged in pull request #1497.
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
Download Patch File Download Diff File Expand all files Collapse all files

18
_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>
</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;