Skip to content

Commit abeca7e

Browse files
arkada38arkada38
committed
Adding navbar toggler
1 parent 879e68c commit abeca7e

File tree

2 files changed

+47
-26
lines changed

2 files changed

+47
-26
lines changed

‎_layouts/default.html‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,60 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>{{ page.title }}</title>
63

7-
<!-- Bootstrap -->
8-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
9-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
11-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
4+
<head>
5+
<meta charset="utf-8">
6+
<title>{{ page.title }}</title>
127

13-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
8+
<!-- Bootstrap -->
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
10+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
12+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
1413

15-
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
16-
<link rel="stylesheet" href="/assets/css/syntax.css">
14+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
1715

18-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
16+
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
17+
<link rel="stylesheet" href="/assets/css/syntax.css">
1918

20-
{% include analytics.html %}
21-
</head>
22-
<body>
23-
<nav class="navbar navbar-expand-sm bg-light">
19+
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {% include analytics.html %}
20+
</head>
21+
22+
<body>
23+
<nav class="navbar navbar-expand-sm bg-light">
24+
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
25+
area-expanded="false" aria-label="Toggle navigation">
26+
<span class="navbar-toggler-icon"></span>
27+
</button>
28+
29+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
2430
<ul class="navbar-nav">
2531
<li class="nav-item">
26-
<a class="nav-link" href="/"><span class="icon is-small"><i class="fa fa-home" aria-hidden="true"></i></span> Home</a>
32+
<a class="nav-link" href="/">
33+
<span class="icon is-small">
34+
<i class="fa fa-home" aria-hidden="true"></i>
35+
</span> Home</a>
2736
</li>
2837
<li class="nav-item">
29-
<a class="nav-link" href="/posts"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Posts</a>
38+
<a class="nav-link" href="/posts">
39+
<i class="fa fa-newspaper-o" aria-hidden="true"></i> Posts</a>
3040
</li>
3141
<li class="nav-item">
32-
<a class="nav-link" href="/projects"><i class="fa fa-bicycle" aria-hidden="true"></i> Projects</a>
42+
<a class="nav-link" href="/projects">
43+
<i class="fa fa-bicycle" aria-hidden="true"></i> Projects</a>
3344
</li>
3445
<li class="nav-item">
35-
<a class="nav-link" href="/useful-links"><i class="fa fa-link" aria-hidden="true"></i> Useful Links</a>
46+
<a class="nav-link" href="/useful-links">
47+
<i class="fa fa-link" aria-hidden="true"></i> Useful Links</a>
3648
</li>
3749
</ul>
38-
</nav>
39-
40-
<div class="container">
41-
{{ content }}
4250
</div>
51+
</nav>
52+
53+
<div class="container">
54+
{{ content }}
55+
</div>
56+
57+
{% include footer.html %}
58+
</body>
4359

44-
{% include footer.html %}
45-
</body>
4660
</html>

‎assets/css/main.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
.logo {
22
height: 38px;
33
width: 38px;
4+
}
5+
6+
.custom-toggler.navbar-toggler {
7+
border-color: #007bff;
8+
}
9+
.custom-toggler .navbar-toggler-icon {
10+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,123,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
411
}

0 commit comments

Comments
 (0)