Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Customizing the width of dropdown menus with Clarkson


Jnap

Question

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

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

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

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

Link to comment
  • 0
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.

Link to comment
  • 0

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
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...