Borders Around Navigation Links in Header

Hello fellow Circle Members!

I'm trying to figure out how to create the effect in the attached photos (borders around navigation links). I've found some code snippets out there but none have been successful. I'd even be willing to buy a plug-in somewhere to help me achieve the effect but I can't find one offered anywhere. Thank you so much in advance to anyone who can help with this!

Can you share link to site where you want to apply this effect, we can check code easier

Sure! alchemycreativ.co 

No password required to enter the site. Thanks!

On 4/22/2024 at 7:37 AM, alchemycreativ said:

Sure! alchemycreativ.co 

No password required to enter the site. Thanks!

You can use this code to Website > Website > Custom CSS

/* nav border */
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 100% !important;
    flex-direction: column;
    width: 100% !important
}

.header-display-desktop {
    flex-direction: column
}

.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-left: 0;
    padding-right: 0
}

.header-nav {
    width: 103.2%;
    border-top: 1px solid #fff;
    padding-top: 0px;
    padding-left: .7vw !important;
    border-bottom: 1px solid #fff !important
}

.header-nav-item--divider {
    padding: .1rem 0;
    border-right: 1px solid #fff !important
}

.header-nav-item:not(:first-child) {
    border-left: 1px solid #fff;
}

div.header-nav-item {
    padding-left: 1.5vw !important;
    padding-right: 1.5vw !important;
}

Thank you so much! I'm going to give your code a try and also brush up on my coding skills, as this one seems more complex 🙂