Adding Boarders And Changing Font of Dropdown Menus

Site URL: https://apricots-ellipse-kza7.squarespace.com/

Hey everyone, I have been trying to figure this out on my own but I think this is above my current skill level. I don't know anything about coding so any customization I have been able to do so far has been through searching on this forum and google.

I would like to add a black boarder around the individual boxes within the dropdown menus in the navigation bar so there is a bit of separation between the links and not just a bunch of white. I have included a quick mockup of what I'm trying to accomplish to help clarify.

Also, this site uses some branded custom font, however I would like the dropdown menus to use the same regular font as the navigation bar. Also as a bonus, if someone could help me figure out how to change the font of the "Quick View" bars on the products, that would be incredible.

If anyone can help, that would be greatly appreciated!

Your site is private. Can you setup password & share url again?

6 minutes ago, tuanphan said:

Your site is private. Can you setup password & share url again?

Sorry about that! I'm very new to this. Password is Ilovecoffee!

URL: https://apricots-ellipse-kza7.squarespace.com/

17 minutes ago, lkramer said:

Sorry about that! I'm very new to this. Password is Ilovecoffee!

URL: https://apricots-ellipse-kza7.squarespace.com/

Add to Home > Design > Custom CSS

.header-nav-folder-item {
    border: 2px solid black;
	padding-top: 5px;
}
.header-nav-folder-item:nth-child(even) {
    border-top: none;
    border-bottom: none;
}

6 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-folder-item {
    border: 2px solid black;
	padding-top: 5px;
}
.header-nav-folder-item:nth-child(even) {
    border-top: none;
    border-bottom: none;
}

 

Thanks you so much, that already looks so much better! Is it possible to make the boarders stretch to the very edge of the dropdown boxes?

Add to Home > design > Custom CSS

.header-nav-folder-content {
    padding: 0 !important;
}
/* dropdown font */
.header-nav-folder-content * {
    font-family: itc-avant-garde-gothic-pro;
}
/* quick view */
span.sqs-product-quick-view-button {
    font-family: itc-avant-garde-gothic-pro;
}

2 minutes ago, tuanphan said:

Add to Home > design > Custom CSS

.header-nav-folder-content {
    padding: 0 !important;
}
/* dropdown font */
.header-nav-folder-content * {
    font-family: itc-avant-garde-gothic-pro;
}
/* quick view */
span.sqs-product-quick-view-button {
    font-family: itc-avant-garde-gothic-pro;
}

 

THANK YOU! I have been trying to figure out how to do that for days. My boss asked me to do so but I have zero coding experience. You just saved a lot of headache so thank you once again!