How to Create File Folder Style Navigation

I am curious if anyone knows how to create a navigation header similar to the photo attached - sort of like a file folder style where the selected tab is not underlined? I've been searching and haven't found anything similar. Any help would be great!

Hey @JZoeller!

Wow that looks cool! I’m willing to take a stab at it. Could you share a link to your website so I can make code for your template/style? (If it’s password protected, please include your password.)

Hi @Inspirerd, thanks so much!

The website is https://fife-harp-k7yh.squarespace.com/ and password is "mwedit". Appreciate your help!

Hey @JZoeller!

Here is the first draft to show you the concept. Feel free to nitpick and tell me all the adjustments you want (should the line touch the image, should there be more space between the logo and the line, should the links have bigger boxes?)

Make sure to take a look at how it behaves when you scroll the page.

Here is the code (it only applies this style to desktop/not to mobile).

@media screen and (min-width: 768px) {
    .header-nav-item {
        border: solid 1px var(--navigationLinkColor);
        border-bottom: 0;
        padding: 10px 20px;
        position: relative;
    }

    .header-nav-item--active.header-nav-item--active.header-nav-item--active > a {
        background-image: none;
    }
    
    .header-nav-item--active::before,
    .header-nav-item--active::after {
        content: "";
        position: absolute;
        bottom: 0;
        border-bottom: solid 1px var(--navigationLinkColor);
        width: 100000px;
        width: 100vw;
    }

    .header-nav-item--active::before {
        right: 100%;
    }

    .header-nav-item--active::after {
        left: 100%;
    }

    .header-title-nav-wrapper {
        align-items: flex-end;
    }

}

@Inspirerd WOW!! That is exactly what I was hoping for, thank you so much!

My only feedback is what you said above - remove the space between the line and the image below, and also add a little bit of padding  below the logo.

Thank you!!

@Inspirerd That looks perfect! Thank you so much for your help 🙂