Sam Sam - 3 months ago 16
CSS Question

Eliminate Randomly Padded Element on My Site

I have a smidge of custom code on my Squarespace site. I know this isn't the Squarespace forum, but I'm blanking on how to target just one specific element in my custom CSS.

So here's the site: http://www.roboticsrookie.com/

I've tried putting #main-navigation a.folder {padding: 0px}; in my sitewide CSS, but it's proven to be ineffective. Any tips would be greatly appreciated.

The problem seems to be that Squarespace generates an empty navigation link that has padding, but I figure out how to get rid of the specific element's padding.

Screen shot

Answer

It's not "padding" it's an anchor tag, probably designed to hold an icon for drop down menus.

Remove the empty anchor tag there if possible.

<li aria-haspopup="true" class="folder-collection folder">
<a href="#" onclick="return false;"></a> <!-- < this anchor is the space -->
<a href="http://www.roboticsrookie.com/reviews/">Reviews</a>
<span class="delimiter">/</span>
<div class="subnav">
<ul>
<li class="page-collection"><a href="/robotics-reviews/">Robotics Reviews</a></li>
<li class="page-collection"><a href="/book-reviews/">Book Reviews</a></li>
<li class="blog-collection"><a href="/reviews/">Reviews</a></li>
</ul>
</div>
</li>

Or add CSS :

li.folder-collection.folder > a:nth-child(1) { display: none;}

This should remove that first empty anchor.

You're css selector was incorrect. #main-navigation a.folder is looking for an anchor tag with the class "folder". In other words <a class="folder" href="#"></a>.

What you have is a list item with the class folder and an anchor tag within that list item. Or <li class="folder-collection folder"><a href="#"></a></li>.

You can't (easily) target that specific anchor because there's nothing unique about it. There's no class or id apples to the anchor and there are other anchors within that list item. So you need to use more specific selectors, such as nth-child, to select it.