Jump to content

Navigation Folder customization - padding issue

Go to solution Solved by SquareRefresh,

Recommended Posts

Site URL: https://taverna-rossa-21.squarespace.com/

Been working on a design for a folder to look more like a button and have the content styled in contrast to the rest of the navigation. Here is the CSS that I've added so far (be kind, super new to this):

// Navigation Button //

.header-nav .header-nav-item--folder {
  background: #f7f1e9 !important;
  color: #c14729 !important;
  width: 110px;
    border: 2px #c14729 solid;
  border-radius: 0px;
  text-align: center !important;

// Navigation Folder Style //

.header-nav .header-nav-item--folder .header-nav-folder-content a {
  max-width: 100px !important;
  text-align: center;
  color: #f7f1e9 !important;
  background: #c14729 !important;

The problem is that there is a padding that I can't figure out how to get rid of. I've attached a screenshot for reference. Site password is: pizza

Screen Shot 2021-11-15 at 2.07.22 PM.png

Link to comment
  • Solution

Hey @Penn try this:

body:not(.header--menu-open) .header-nav-folder-content {
  background-color: transparent !important;

My result:

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

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.