Skip to content

Commit b155d5a

Browse files
DevWaelDevWael
committed
Add selectors for wordpress.org nav menu
1 parent f233d32 commit b155d5a

File tree

1 file changed

+76
-25
lines changed

1 file changed

+76
-25
lines changed

‎assets/sass/components/navigation/_navigation.scss‎

Lines changed: 76 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
width: 100%;
66

77
&.main-navigation {
8-
> div#primary-menu {
8+
> div#primary-menu,
9+
> div {
910
> ul {
1011
list-style: none;
1112
padding: 0;
@@ -15,7 +16,8 @@
1516

1617
@media(min-width: 1025px) {
1718
&.main-navigation {
18-
> div#primary-menu {
19+
> div#primary-menu,
20+
> div {
1921
> ul {
2022
display: flex;
2123
flex-wrap: wrap;
@@ -28,12 +30,15 @@
2830
}
2931
}
3032

31-
.botiga-dropdown-ul {
33+
.botiga-dropdown-ul,
34+
.nav-menu {
3235
list-style: none;
3336
margin: 0;
3437
padding-left: 0;
3538

36-
.botiga-dropdown-ul {
39+
.botiga-dropdown-ul,
40+
.children,
41+
.sub-menu {
3742
width: 200px;
3843
box-shadow: 0 0 15px rgba(0,0,0,.1);
3944
float: left;
@@ -47,20 +52,30 @@
4752
transform: translate3d(0, 15px, 0);
4853
transition: ease transform 300ms, ease opacity 300ms;
4954

50-
.botiga-dropdown-ul {
55+
.botiga-dropdown-ul,
56+
.children,
57+
.sub-menu {
5158
left: 100%;
5259
top: 0;
5360
}
5461

55-
.botiga-dropdown-li {
62+
.botiga-dropdown-li,
63+
.page_item,
64+
.menu-item {
5665
background: #fff;
5766
padding: 0;
5867
display: flex;
5968
margin-right: 0;
6069

6170
&.hovered > .botiga-dropdown-ul,
6271
&:hover > .botiga-dropdown-ul,
63-
&.focus > .botiga-dropdown-ul {
72+
&.focus > .botiga-dropdown-ul,
73+
&.hovered > .children,
74+
&:hover > .children,
75+
&.focus > .children,
76+
&.hovered > .sub-menu,
77+
&:hover > .sub-menu,
78+
&.focus > .sub-menu {
6479
display: block;
6580
left: 100%;
6681
}
@@ -81,7 +96,9 @@
8196
}
8297
}
8398

84-
.botiga-dropdown-link {
99+
.botiga-dropdown-link,
100+
.page_item a,
101+
.menu-item a {
85102
width: 100%;
86103
display: inline-block;
87104
text-transform: none;
@@ -91,7 +108,13 @@
91108

92109
.botiga-dropdown-li.hovered > .botiga-dropdown-ul,
93110
.botiga-dropdown-li:hover > .botiga-dropdown-ul,
94-
.botiga-dropdown-li.focus > .botiga-dropdown-ul {
111+
.botiga-dropdown-li.focus > .botiga-dropdown-ul,
112+
.page_item.hovered > .children,
113+
.page_item:hover > .children,
114+
.page_item.focus > .children,
115+
.menu-item.hovered > .sub-menu,
116+
.menu-item:hover > .sub-menu,
117+
.menu-item.focus > .sub-menu {
95118
left: auto;
96119
top: 100%;
97120
opacity: 1;
@@ -109,7 +132,9 @@
109132
bottom: 100%;
110133
}
111134

112-
.botiga-dropdown-ul {
135+
.botiga-dropdown-ul,
136+
.children,
137+
.sub-menu {
113138
top: 0;
114139

115140
&.sub-menu-reverse {
@@ -125,7 +150,9 @@
125150
}
126151
}
127152

128-
.botiga-dropdown-li {
153+
.botiga-dropdown-li,
154+
.page_item,
155+
.menu-item {
129156
position: relative;
130157
margin-right: 35px;
131158
padding-bottom: 0;
@@ -135,7 +162,9 @@
135162
}
136163
}
137164

138-
.botiga-dropdown-link {
165+
.botiga-dropdown-link,
166+
.page_item a,
167+
.menu-item a {
139168
padding: 10px 0;
140169
display: inline-block;
141170
text-decoration: none;
@@ -152,14 +181,24 @@
152181
}
153182

154183
&.with-hover-delay {
155-
.botiga-dropdown-ul {
156-
.botiga-dropdown-ul {
184+
.botiga-dropdown-ul,
185+
.children,
186+
.sub-menu {
187+
.botiga-dropdown-ul,
188+
.children,
189+
.sub-menu {
157190
transition-delay: 0ms;
158191
}
159192

160193
.botiga-dropdown-li.hovered > .botiga-dropdown-ul,
161194
.botiga-dropdown-li:hover > .botiga-dropdown-ul,
162-
.botiga-dropdown-li.focus > .botiga-dropdown-ul {
195+
.botiga-dropdown-li.focus > .botiga-dropdown-ul,
196+
.page_item.hovered > .children,
197+
.page_item:hover > .children,
198+
.page_item.focus > .children,
199+
.menu-item.hovered > .sub-menu,
200+
.menu-item:hover > .sub-menu,
201+
.menu-item.focus > .sub-menu {
163202
transition-delay: 300ms;
164203
}
165204
}
@@ -169,17 +208,22 @@
169208
@media(max-width: 1024px) {
170209

171210
&.botiga-dropdown-mobile-accordion {
172-
.botiga-dropdown-li {
211+
.botiga-dropdown-li,
212+
.page_item,
213+
.menu-item {
173214
margin-right: 0;
174215

175-
&.menu-item-has-children {
216+
&.menu-item-has-children,
217+
&.page_item_has_children {
176218
display: flex;
177219
flex-wrap: wrap;
178-
> .botiga-dropdown-link {
220+
> .botiga-dropdown-link,
221+
> a {
179222
width: calc( 100% - ( var(--dropdown--symbol--size) + 0.5em ) );
180223
}
181224

182-
> .sub-menu {
225+
> .sub-menu,
226+
> .children {
183227
position: relative;
184228
width: 100%;
185229
left: 0;
@@ -188,25 +232,30 @@
188232
transform: none;
189233
box-shadow: none;
190234

191-
> .botiga-dropdown-li {
235+
> .botiga-dropdown-li,
236+
> .page_item,
237+
> .menu-item {
192238
background-color: transparent;
193239
}
194240

195-
.sub-menu {
241+
.sub-menu,
242+
.children {
196243
padding-left: 20px;
197244
}
198245
}
199246

200247
&.expand {
201-
> .sub-menu {
248+
> .sub-menu,
249+
> .children {
202250
opacity: 1;
203251
height: auto;
204252
overflow: visible;
205253
}
206254
}
207255

208256
&:not(.expand) {
209-
> .sub-menu {
257+
> .sub-menu,
258+
> .children {
210259
opacity: 0;
211260
height: 0;
212261
overflow: hidden;
@@ -243,12 +292,14 @@
243292
}
244293

245294
/* Small menu. */
246-
.botiga-dropdown.toggled .botiga-dropdown-ul {
295+
.botiga-dropdown.toggled .botiga-dropdown-ul,
296+
.botiga-dropdown.toggled .nav-menu {
247297
display: block;
248298
}
249299

250300
@media screen and (min-width: 1025px) {
251-
.botiga-dropdown .botiga-dropdown-ul {
301+
.botiga-dropdown .botiga-dropdown-ul,
302+
.botiga-dropdown .nav-menu {
252303
display: flex;
253304
flex-wrap: wrap;
254305
}

0 commit comments

Comments
 (0)