CSS

*{
2

padding: 0;
3

margin: 0;
4

text-decoration: none;
5

list-style: none;
6

box-sizing: border-box;
7

}
8

nav{
10

background: #2fcdcd;
11

height: 80px;
12

width: 100%;
13

}
14

.enlace{
15

position: absolute;
16

padding: 20px 50px;

17

}
18

.logo{
19

height: 40px;
20

}
21
nav ul{
22

float: right;
23

margin-right: 20px;
24

}
25

nav ul li{
26

display: inline-block;
27

line-height: 80px;
28

margin: 0 5px;
29

}
30

nav ul li a{
31

color: #fff;
32

font-size: 18px;
33

padding: 7px 13px;

34

border-radius: 3px;
35

text-transform: uppercase;
36

}
37

li a.active, li a:hover{
38

background: #000090;
39

transition: .5s;
40

}
41

.checkbtn{
42
 font-size: 30px;
43

color: #fff;
44

float: right;
45

line-height: 80px;
46

margin-right: 40px;
47

cursor: pointer;
48

display: none;
49

}
50

#check{
51

display: none;
52

}
53

section{
54

background: url(fondo.jpg) no-repeat;

55

background-size: cover;
56

background-position: center center;

57

height: calc(100vh - 80px);

58

}
59

60

@media (max-width: 952px){

61

.enlace{
62

padding-left: 20px;
63
 }
64

nav ul li a{
65

font-size: 16px;
66

}
67

}
68

69

@media (max-width: 858px){

70

.checkbtn{
71

display: block;
72

}
73

ul{
74

position: fixed;
75

width: 100%;
76

height: 100vh;
77

background: #2c3e50;
78

top: 80px;
79

left: -100%;
80

text-align: center;
81

transition: all .5s;

82

}
83

nav ul li{
84
 display: block;
85

margin: 50px 0;
86

line-height: 30px;
87

}
88

nav ul li a{
89

font-size: 20px;
90

}
91

li a:hover, li a.active{
92

background: none;
93

color: red;
94

}
95

#check:checked ~ ul{
96

left:0;
97

}
98