Adding border to nav bar only (not the whole header)

Similar to this question, but a little different. I am trying to get a border around the top and bottom of the nav items ONLY, not the whole header. I'd also like to JUST go over the menu text, and NOT be the full width of the screen.

My client wants to recreate this: https://flowinghealth.org/

Working here: https://oval-collie-bss2.squarespace.com/

PW flowing

ok, I found this, and this will more or less work, but now I also need one of the same size underneath.

Ah, I adjusted the code above and figured it out.

If any one else needs it:

/*line above and below nav bar*/
.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: 90%;
    border-top: .8px solid #c5c3c3;
    padding-top: 15px;
}
.header-nav {
    width: 90%;
    border-bottom: .8px solid #c5c3c3;
    padding-bottom: 15px;
}