Customizing the width of dropdown menus with Clarkson

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:
http://www.originexpeditions.org

Here is the one I'm working on:
https://antelope-bluebird-89a2.squarespace.com/
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

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!

Thanks

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.

--Baz

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.

--Baz

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

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.

On 7/29/2021 at 3:32 AM, Jnap said:

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

Do you still need help?

On 7/30/2021 at 4:46 AM, tuanphan said:

Do you still need help?

I decided to just eliminate the drop down menu's altogether so I'm good now. Thank you!