- This topic has 4 replies, 2 voices, and was last updated 4 years, 7 months ago by
.
Viewing 5 posts - 1 through 5 (of 5 total)
-
Posts
-
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
Customer Support
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!
Viewing 5 posts - 1 through 5 (of 5 total)
- You must be logged in to reply to this topic.
