Archived topic
Menu Item Separator
5 replies · Started by Samuel on July 18, 2022
Hi,
i am using this code to get a separator between my menu items:
.main-navigation .menu > li > a {
border-right: 1px solid #DEC095;
}So i get this: https://www.screencast.com/t/bfeZSUrsL
Fine love it. But when i Scroll down, i get this: https://www.screencast.com/t/iuq4Sp7v
How can i fix that? When scrolling, the separators should be the same size as in the normal menu status.
Thanks for the help :)
Hi there,
can i see the site ?
Oh sorry. Of course...
Kindly note that I still have a maintenance mode enabled. You must first log in and then go to the root domain. Otherwise, you will only see the maintenance mode. If you are logged in, you can see the page then...
Hi Samuel,
Can you try this CSS instead?:
.main-nav > ul.menu > li.menu-item > a {
position:relative;
}
.main-nav > ul.menu > li.menu-item > a:after {
content: "";
width: 100%;
height: 20px;
position: absolute;
top:50%;
left:0;
transform: translateY(-50%);
border-right: 1px solid #DEC095;
z-index:9999;
}Kindly let us know how it goes.
Cool. works fine. Thanks!!!
Would be cool if you could create such menus with your generator blocks... :D
You’re welcome Samuel! :)
You can file a feature request here: https://community.generateblocks.com/c/feature-requests/
