Search code examples
cssdrop-down-menusquarespace

Squarespace remove drop down menu from main navigation with CSS

I really like how the FAQ page/questions look on the site I'm building using Squarespace. The only issue is that because of this structure, it also leads to a cumbersome drop down menu when you hover over the FAQ tab on the main navigation.

Here's a link: http://www.officialjerky.com/faq-1/

While it's certainly possible to set up anchored links in another FAQ page, I'm also sure there's a solution that will allow me to keep the structure of the page(s) and get rid of the drop down. Perhaps a bit of custom CSS that could make the drop down invisible?

There was a similar help thread that asked how to change the spacing between the items in the drop down, and the custom CSS input solution was: .primary-nav .folder-links-wrapper li { line-height: 0em; }.

Any guidance or input is really helpful. Thanks.

Solution

  • It's controlled by JS, so you may need a mini sledgehammer to override it. Try this in your CSS:

    .subnav {display: none !important;}

    Ideally, remove the script that is causing the behavior.

    Regarding the + on small screens, on line 9865 of the stylesheet there is this:

    #sidecarNav .folder label:before {
    content: '+';
    padding-right: .25em;
    width: .75em;
    display: inline-block;
}

    You could either remove that code, or just add this to the stylesheet:

    #sidecarNav .folder label:before {
    display:none !important;
}