bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #10 from bartlomiej-pluta/rwd-navbar

Browse Source 
Enable RWD for navbar and header
This commit is contained in:
Bartłomiej Przemysław Pluta
2018-04-12 13:44:22 +02:00
committed by GitHub
parent 1661de16a9 83763013b8
commit b60fe45d49
4 changed files with 67 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/img/navbar/sandwich.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 22" width="27" height="22">
<style>
tspan { white-space:pre }
.shp0 { fill: #333333 }
</style>
<path id="sandwich" class="shp0" d="M0,20.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM0,11.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM6,2.5c0,0.83 0.67,1.5 1.5,1.5h17c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-17c-0.83,0 -1.5,0.67 -1.5,1.5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B

18
src/index.html
View File

@@ -28,14 +28,19 @@
</head> </head>
<body> <body>
<div class="wrapper" id="wrapper"> <div class="wrapper" id="wrapper">
<div class="navbar navbar-expand-lg fixed-top"> <div class="navbar navbar-light navbar-expand-lg fixed-top">
<div class="container"> <div class="container navbar__content">
<div class="brand navbar-header"> <div class="brand navbar__content__brand navbar-header">
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo"> <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="brand__name">Fork</span> <span class="brand__name">Fork</span>
<span class="brand__name brand__name--emph">IO</span> <span class="brand__name brand__name--emph">IO</span>
</div> </div>
<ul class="navbar__body navbar-nav"> <button class="navbar__content__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
<img src="img/navbar/sandwich.svg" alt="">
</button>
<div class="collapse navbar-collapse nav-content" id="navbarNavDropdown">
<ul class="navbar__content__body navbar-nav mr-0 ml-auto">
<li class="nav-item"> <li class="nav-item">
<a class="navbar__link nav-link" href="#">Overview</a> <a class="navbar__link nav-link" href="#">Overview</a>
</li> </li>
@@ -48,11 +53,10 @@
<li class="nav-item"> <li class="nav-item">
<a class="navbar__link nav-link" href="#">Support</a> <a class="navbar__link nav-link" href="#">Support</a>
</li> </li>
<li class="nav-item">
<button class="rounded-button rounded-button--strong">Buy now</button>
</li>
</ul> </ul>
</div> </div>
<button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
</div>
</div> </div>
<header class="header"> <header class="header">

2
src/scss/_header.scss
View File

@@ -1,5 +1,5 @@
.header { .header {
background: black url(../img/header/img.png) no-repeat 50% 30% / cover; background: black url(../img/header/img.png) no-repeat center 120px/ cover;
height: 100vh; height: 100vh;
padding-top: 110px; padding-top: 110px;
} }

28
src/scss/_navbar.scss
View File

@@ -1,10 +1,10 @@
$shrinking-duration: 0.4s; $shrinking-duration: 0.4s;
@media all and (min-width: $desktop) {
.navbar { .navbar {
margin: 0 0; margin: 0 0;
padding: 0 90px; padding: 0 90px;
height: 100px; height: 100px;
background-color: white;
transition: height $shrinking-duration; transition: height $shrinking-duration;
} }
@@ -12,6 +12,32 @@ $shrinking-duration: 0.4s;
height: 50px; height: 50px;
transition: height $shrinking-duration; transition: height $shrinking-duration;
} }
}
.navbar {
background-color: white;
}
.navbar__content {
display: flex;
}
.navbar__content__header {
order: 1;
}
.navbar__content__toggler {
order: 4;
border: none;
}
.navbar__content__body {
order: 2;
}
.navbar__content__button {
order: 3;
}
.navbar__link { .navbar__link {
text-transform: capitalize; text-transform: capitalize;