Add Characters Between Menu Items On Desktop and Mobile Versions Of My Site

Site URL: https://www.joshuaschweigert.com/

Hello,

I would love some assistance in adding a little flare to my desktop and mobile menu. I'd love to be able to add separators between each menu item for both the mobile and desktop versions of my website. Ideally, I'd like each menu to to look like my screenshots.

I would also like to decrease all mobile elements in the overlay menu by 50%.

Thank you,

Joshua Schweigert

Add to Design > custom CSS

.header-nav-item:not(:last-child) {
    padding-left: 10px;
    border-right: 1px solid black;
    padding-right: 10px;
}
div.container.header-menu-nav-item:after {
    content: "";
    background-color: black;
    display: block;
    width: 35px;
    height: 1px;
    margin-left: 5vw;
}