Jump to content

Adding Boarders And Changing Font of Dropdown Menus

Recommended Posts

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!

Screen Shot 2020-04-13 at 8.00.59 AM.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.