hi @arminunruh , thanks for the code provided, it worked really well on the menu. I edited it a bit as the lines were appearing with a kind of padding on top, dded a line at the end, kind of "closing" the menu and also added one of these to the site title.
Is there a way I Could fix the submenu to make it look like the menu ( inside "boxes"?)
I attach an image and the code I've used.
Thanks in advance,
Eduard
[image: Captura de pantalla 2026-11-10 a les 20.29.07.png]
<script>
(function () {
var lists = document.querySelectorAll('nav.laynav.primary > ul');
for (var i = 0; i < lists.length; i++) {
var ul = lists[i];
var items = [];
// Collect real menu items
for (var c = 0; c < ul.children.length; c++) {
var child = ul.children[c];
if (child.tagName === 'LI' &&
!child.classList.contains('lay-menu-divider')) {
items.push(child);
}
}
// Insert dividers between menu items
for (var j = 1; j < items.length; j++) {
var prev = items[j].previousElementSibling;
if (prev && prev.classList.contains('lay-menu-divider')) {
continue;
}
var divider = document.createElement('li');
divider.className = 'lay-menu-divider';
divider.setAttribute('aria-hidden', 'true');
ul.insertBefore(divider, items[j]);
}
// Add final divider
if (items.length > 0) {
var last = items[items.length - 1];
var next = last.nextElementSibling;
if (!next || !next.classList.contains('lay-menu-divider')) {
var finalDivider = document.createElement('li');
finalDivider.className = 'lay-menu-divider';
finalDivider.setAttribute('aria-hidden', 'true');
ul.insertBefore(finalDivider, last.nextSibling);
}
}
}
})();
</script>
<style>
nav.laynav.primary > ul > li.lay-menu-divider {
display: inline-block !important;
vertical-align: top;
position: relative;
top: -16px;
width: 1px;
height: 46px;
margin: 0px;
padding: 0;
background-color: #000;
}
/* Site Title - left vertical line */
.sitetitle-txt-inner:not(.laybutton)::before {
content: "";
position: absolute;
left: -30px;
top: -16px;
width: 1px;
height: 46px;
background-color: #000;
}
</style>
