I'm currently using the Twenty Seventeen theme on my WordPress site. My issue lies with trying to arrange my sub-menu items into 2 columns, as I have multiple items nested under one of my main menu options.
After attempting to add the following code to the "Additional CSS" section in the customization settings, I saw no changes reflected on my site:
.sub-menu-columns ul.sub-menu li {
clear: initial;
display: inline-block;
float: left;
width: 50%;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 300px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
I also gave this code a try, but unfortunately, it didn't yield any successful results:
.sub-menu-columns ul.sub-menu li {
display: inline-block;
float: left;
width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
Another attempt was made by adjusting the submenu column width, however, the items still did not separate into 2 columns:
.sub-menu {
width: 410px;
}
.sub-menu-columns ul.sub-menu li {
display: inline-block;
float: left;
width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}