Archived topic
Sub menu 2 columns
4 replies · Started by Ivo on September 7, 2021
Viewing posts 1–5 of 5
Hi,
I would like to create a 2 column submenu, what is the best way to do it?
.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;
}
Thanks for the help. Best regards, Ivo
Hi there,
try this CSS:
@media(min-width: 769px) {
/* 2 column sub menu */
.sub-menu-columns>.sub-menu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(7, 1fr);
grid-auto-flow: column;
width: 450px;
}
/* add bottom border to sub menu items */
.main-navigation .sub-menu-columns>.sub-menu>li>a {
border-bottom: 1px solid #fff;
}
/* add left border to the 8th child and above */
.main-navigation .sub-menu-columns>.sub-menu>li:nth-child(n+8)>a {
border-left: 1px solid #fff;
}
}Hi,
Perfect! Many thanks!
Best regards, Ivo
Glad to be of help!
This archived topic is closed to new replies.
