view source
001
.main-wrapper img {
002
width:100%;
003
display:block;
004
}
005
006
.main-wrapper a {
007
color:#000;
008
text-decoration:none;
009
}
010
011
.main-wrapper ul li {
012
list-style-type:none;
013
}
014
015
.navbar {
016
background:#fff;
017
padding:0 1rem;
018
position:fixed;
019
top:0;
020
left:0;
021
width:100%;
022
max-height:100vh;
023
display: flex;
024
flex-direction: column;
025
z-index:10;
026
}
027
028
.brand-and-icon {
029
display: flex;
030
justify-content: space-between;
031
padding:1rem0;
032
border-bottom:1px solid #ddd;
033
}
034
035
.navbar-brand {
036
font-size:1.8rem;
037
letter-spacing:3px;
038
font-weight:700;
039
}
040
041
.navbar-toggler {
042
display:block;
043
border:none;
044
background:transparent;
045
font-size:1.8rem;
046
cursor:pointer;
047
padding:0.2rem0.5rem;
048
transition:all 0.4s ease;
049
border:2px solid #000;
050
border-radius:4px;
051
}
052
053
.navbar-toggler:hover {
054
opacity:0.7;
055
}
056
057
.navbar-collapse {
058
overflow-y:scroll;
059
display:none;
060
}
061
062
.navbar-nav>li>a {
063
text-transform:uppercase;
064
font-size:1.1rem;
065
font-weight:700;
066
display:block;
067
padding:0.6rem0;
068
margin:0.2rem0;
069
border-bottom:1px solid #ddd;
070
border-radius:1px;
071
position:relative;
072
transition:all 0.4s ease;
073
}
074
075
.drop-icon {
076
position:absolute;
077
right:10px;
078
top:50%;
079
transform: translateY(-50%);
080
}
081
082
.navbar-nav>li>a:hover {
083
opacity:0.7;
084
}
085
086
.sub-menu h4 {
087
text-transform:capitalize;
088
font-size:1rem;
089
padding:0.5rem0;
090
}
091
092
.sub-menu ul li {
093
text-transform:capitalize;
094
padding:0.2rem0;
095
margin:0.2rem0;
096
font-size:0.95rem;
097
}
098
099
.sub-menu ul li a {
100
opacity:0.8;
101
transition:all 0.5s ease;
102
}
103
104
.sub-menu ul li a:hover {
105
padding-left:14px;
106
opacity:0.9;
107
}
108
109
.sub-menu {
110
display:none;
111
}
112
113
.sub-menu-item {
114
padding-left:1.2rem;
115
}
116
117
.sub-menu-item:nth-child(3) {
118
background:#ddd;
119
display: flex;
120
flex-direction: column;
121
justify-content:center;
122
align-items: flex-start;
123
padding-top:2rem;
124
padding-bottom:2rem;
125
}
126
127
.sub-menu-item:nth-child(3) h2 {
128
text-transform:capitalize;
129
margin:1.5rem0;
130
}
131
132
.sub-menu-item:nth-child(3) .btn {
133
border:1px solid #000;
134
text-transform:uppercase;
135
font-size:0.9rem;
136
padding:0.6rem1rem;
137
cursor:pointer;
138
background:#000;
139
color:#fff;
140
transition:all 0.5s ease;
141
}
142
143
.sub-menu-item:nth-child(3) .btn:hover {
144
background:transparent;
145
color:#000;
146
}
147
148
.sub-menu-item:nth-child(4) {
149
width:50%;
150
margin:0 auto;
151
padding:2rem0;
152
}