Skip to content

Commit c43c68e

Browse files
migueabellanmigueabellan
committed
Add menu responsive
1 parent f6c87c6 commit c43c68e

File tree

3 files changed

+111
-46
lines changed

3 files changed

+111
-46
lines changed

‎_layouts/default.html

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,18 @@
3232
</div>
3333
<nav class="row">
3434
<div class="col-lg-12">
35-
<ul>
36-
<li><a class="{% if page.url contains '/asociacion/' %}active{% endif %}" href="{{ "/asociacion/" | prepend: site.baseurl }}">Asociación</a></li>
37-
<li><a class="{% if page.url contains '/dojos/' %}active{% endif %}" href="{{ "/dojos/" | prepend: site.baseurl }}">Dojos</a></li>
38-
<li><a class="{% if page.url contains '/noticias/' %}active{% endif %}" href="{{ "/noticias/" | prepend: site.baseurl }}">Noticias</a></li>
39-
</ul>
35+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
36+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
37+
<span class="navbar-toggler-icon"></span>
38+
</button>
39+
<div class="collapse navbar-collapse" id="navbarNav">
40+
<ul class="navbar-nav">
41+
<li class="nav-item"><a class="nav-link {% if page.url contains '/asociacion/' %}active{% endif %}" href="{{ "/asociacion/" | prepend: site.baseurl }}">Asociación</a></li>
42+
<li class="nav-item"><a class="nav-link {% if page.url contains '/dojos/' %}active{% endif %}" href="{{ "/dojos/" | prepend: site.baseurl }}">Dojos</a></li>
43+
<li class="nav-item"><a class="nav-link {% if page.url contains '/noticias/' %}active{% endif %}" href="{{ "/noticias/" | prepend: site.baseurl }}">Noticias</a></li>
44+
</ul>
45+
</div>
46+
</nav>
4047
</div>
4148
</nav>
4249
</div>
@@ -69,5 +76,10 @@
6976
</footer>
7077

7178
</div>
79+
80+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
81+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
82+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
83+
7284
</body>
7385
</html>

‎_sass/base/_reset.scss

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,40 @@
22
* Reset
33
*/
44

5-
body { margin:0 auto; padding:0; height:auto; font-family:'Lato','Helvetica'; font-weight:normal; font-size:14px; font-weight:normal; color:#444; line-height:1.6; background:#ebeced; }
6-
body a { color:#888; text-decoration:none; outline:none; }
7-
body a:active:focus,
8-
body a:hover { color:#888; text-decoration:none; }
9-
body a:focus { color:#888; outline:none; text-decoration:none; }
10-
body .navbar button { outline:none; text-decoration:none; }
11-
12-
body p { margin:5px 0 10px; }
13-
body strong { font-weight:normal; font-family:'OpenSans-SemiBold'; }
14-
body sup.required { color:#F13340; }
15-
ul { margin:0; padding:0; list-style:disc!important;}
16-
ul li { -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; list-style:none; margin:0; padding:0; }
17-
table tr td { vertical-align:middle !important;}
18-
19-
/* overrides */
20-
.container-fluid { max-width:1280px; /*margin-right:auto; margin-left:auto;*/ padding-left:5px; padding-right:5px; }
21-
.row { margin-right:-5px; margin-left:-5px; }
22-
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding-right:5px;padding-left:5px;}
23-
24-
h1, h2, h3 { font-size:2rem;; display:block; margin:0 0 15px; padding:0; }
25-
h1 { font-size:22px; }
26-
h2 { font-size:16px; }
27-
h3 { font-size:14px; }
5+
body { margin:0 auto; padding:0; height:auto; font-family:'Lato','Helvetica'; font-weight:normal; font-size:14px; font-weight:normal; color:#444; line-height:1.6; background:#ebeced; }
6+
body a { color:#888; text-decoration:none; outline:none; }
7+
body a:active:focus,
8+
body a:hover { color:#888; text-decoration:none; }
9+
body a:focus { color:#888; outline:none; text-decoration:none; }
10+
body .navbar button { outline:none; text-decoration:none; }
11+
12+
body p { margin:5px 0 10px; }
13+
body strong { font-weight:normal; font-family:'OpenSans-SemiBold'; }
14+
body sup.required { color:#F13340; }
15+
ul { margin:0; padding:0; list-style:disc!important;}
16+
ul li { -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; list-style:none; margin:0; padding:0; }
17+
table tr td { vertical-align:middle !important;}
18+
19+
/* overrides */
20+
.container-fluid { max-width:1280px; /*margin-right:auto; margin-left:auto;*/ padding-left:25px; padding-right:25px; }
21+
.row { margin-right:-5px; margin-left:-5px; }
22+
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding-right:5px;padding-left:5px;}
23+
24+
@media only screen and (max-width:1199px){}
25+
@media only screen and (max-width:991px){
26+
.container-fluid { padding-left:5px; padding-right:5px; }
27+
}
28+
@media only screen and (max-width:767px){}
29+
@media only screen and (max-width:543px){}
30+
31+
h1, h2, h3 { font-size:2rem; display:block; margin:0 0 15px; padding:0; }
32+
h1 { font-size:22px; }
33+
h2 { font-size:16px; }
34+
h3 { font-size:14px; }
2835

36+
#forkongithub {
37+
display:none;
38+
}
2939
#forkongithub a {
3040
background:#000;
3141
color:#fff;

‎_sass/base/_style.scss

Lines changed: 61 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,55 @@
22
.logo {
33
margin: 15px 0 20px;
44
}
5-
ul {
5+
.navbar {
66
display:block;
7+
margin:0;
8+
padding:0;
79
background: #fff;
8-
border-bottom: 3px solid #333;
9-
li {
10-
list-style: none;
11-
display: inline-block;
12-
font-size: 1rem;
13-
text-transform: uppercase;
14-
a {
15-
display: block;
16-
padding: 10px 25px;
17-
color: #000;
18-
&:hover,
19-
&.active {
20-
background: #333;
21-
color:#fff;
10+
ul {
11+
display:block;
12+
background: #fff;
13+
li {
14+
list-style: none;
15+
display: inline-block;
16+
font-size: 14px;
17+
text-transform: uppercase;
18+
a {
19+
display: block;
20+
padding: 10px 25px;
21+
color: #000;
22+
border-bottom:3px solid #fff;
23+
&:hover,
24+
&.active {
25+
border-bottom-color: #333;
26+
}
27+
}
28+
}
29+
}
30+
}
31+
}
32+
@media only screen and (max-width:1199px){}
33+
@media only screen and (max-width:991px){
34+
#header {
35+
.logo {
36+
text-align: center;
37+
}
38+
.navbar {
39+
ul {
40+
background: #f0f0f0;
41+
border-bottom: 3px solid #333;
42+
li {
43+
display: block;
44+
a {
45+
border: none;
46+
}
2247
}
2348
}
2449
}
2550
}
2651
}
52+
@media only screen and (max-width:767px){}
53+
@media only screen and (max-width:543px){}
2754

2855
#content {
2956
min-height: 700px;
@@ -33,12 +60,13 @@
3360
text-align: center;
3461
h1 {
3562
margin:0 0 40px;
36-
font-size:3rem;
63+
font-size:2.6rem;
3764
color:#000;
3865
}
3966
}
4067
.description {
41-
font-size: 1.3rem;
68+
font-size: 1.1rem;
69+
line-height: 1.6;
4270
font-weight: normal;
4371
}
4472
ul {
@@ -66,6 +94,10 @@
6694
}
6795
}
6896
}
97+
@media only screen and (max-width:1199px){}
98+
@media only screen and (max-width:991px){}
99+
@media only screen and (max-width:767px){}
100+
@media only screen and (max-width:543px){}
69101

70102
#footer {
71103
padding:15px 20px;
@@ -86,4 +118,15 @@
86118
}
87119
}
88120
}
89-
}
121+
}
122+
@media only screen and (max-width:1199px){}
123+
@media only screen and (max-width:991px){
124+
#footer {
125+
.text-left,
126+
.text-right {
127+
text-align: center;
128+
}
129+
}
130+
}
131+
@media only screen and (max-width:767px){}
132+
@media only screen and (max-width:543px){}

0 commit comments

Comments
 (0)