Jump to content

Customizing the width of dropdown menus with Clarkson

Recommended Posts

Site URL: https://antelope-bluebird-89a2.squarespace.com/

Hi everyone,

I'm looking to migrate my site from a 7.0 template to the 7.1 Clarkson Template.

Here is my old website:

Here is the one I'm working on:
Sitewide password: thanksforhelping

I have spent about 8 hours searching the Squarespace forums, internet, and even trying to learn CSS myself to resolve an issue I have with the Header Navigation Bar. In short:

I want the navigation bar and its dropdown menus to appear as they did on my old site.  Features that I'm talking about include:

  • Text being highlighted upon hover (I've gotten this to work)
  • A semi-transparent dropdown menu for folders with a width that conforms to the text of the longest link + a few inches of padding (see my old site)
  • The currently viewed page having shaded text in the navigation
  • The menu options /links beneath each category being aligned left, formatted in congruence with the folder title above

Additionally, if there is a way to add the semi-transparent background of the dropdown menu to overarching category (IE: About or Expeditions) also, that would be great.

If anyone has solutions to any or all of these requests I would greatly appreciate it.

Thanks for your considerations,

- Joe

Edited by Jnap
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Hi folks,

Just an update. I figured some of this out just by inspecting the webpage to determine where to modify some of the CSS elements. I put the following into custom CSS:

.header-nav-item a:hover {
    color: rgb(111,111,111) !important;

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content  {
    left: -1em;
    right: auto;
    text-align: left;
  min-width: 50px;
    background-color: rgba(155, 155, 155,0.5);

I think there is some importance to having [right: whatever] and [left: whatever] with an auto variable congruent with which the OPPOSITE side you want your text aligned to. In my case, I set the right as auto so I could adjust how far left the alignment is.

Correct me if I'm wrong, I'm new to CSS as of today.

This managed to accomplish all but:

  • The currently viewed page having shaded text in the navigation
  • Adding the semi-transparent background of the dropdown menu to overarching category (IE: About or Expeditions)

Still seeking input on these items!


Link to comment
16 hours ago, IgnitePerth said:

Hey Jnap o/

Your need to update your original post - I think you have miss-pasted your site password.  Once we can see what we are working with, we may be able to help you.


My mistake, I accidentally re-posted the URL. It should work now.

Link to comment

In order to change the drop down transparency, try the below - just change the colour code's transparency to your desired amount (I used the colour code from your old website):

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
	background-color: #000000a1 !important;

I am not aware of an "active-page" class for navigation items, perhaps @tuanphan or @paul2009 can help you with that one.



Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment
  • 4 weeks later...

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.