[Closed] CSS To Keep Text Dropdown Menu Open…

[Historical Forums User]

I’m testing out a new website on Squarespace. If you view it here:
http://jeff-singer.squarespace.com/portfolios/one

You can see there are two text dropdown menus; “Portfolios” and “Projects”. The problem I’m having is they auto close when you’re not viewing something in the menus. I’d like to force those two menus to always be open.

Squarespace said that it could be done via CSS but they can’t tell me how. I have the option of adding CSS code via a global “CSS entry box” but I don’t have access to the actual CSS files. How would I be able to keep the text dropdown menus open at all times?

Thanks!

[Tom Houy]

I’m getting a message that the link you provided is not visible to the public for Squarespace trial accounts. Could you possibly post an example to CodePen.io instead?

It’s difficult to say whether what you want can be accomplished with CSS alone, or if it might need some Javascript without seeing a working example.

[Historical Forums User]

If you click “visitor access” it will let you in.

[Tom Houy]

Generally, with CSS drop down menus, the drop down effect is created with nested lists, such as a UL that is a child of a parent UL. That child UL might initially have it’s Visibility set to “Hidden” (or it’s Display set to “None”), then a pseudo class such as “ul ul:hover” is also declared with a Visibility set to “Visible” (or it’s Display set to “Block”).

There’s a lot of other stuff going on in the code of that page, along with some Javascript which I believe is being used on the menu as well. But you might want to try either of these CSS snippets to see if they work:

#mainNavigation ul ul {
     display: block !important;
}

…or try this…

#mainNavigation ul ul {
     visibility: visible !important;
}

The “!important” part isn’t always necessary, but I just included it to try and override anything else that might be interfering with the appearance.

[Historical Forums User]

Thanks!

But, unfortunately neither of those worked.

I kept the 2nd snippet of code in there in case it helps see what’s going on.

[Tom Houy]

Sorry I couldn’t be of more help, but my Javascript is pretty rusty and I’m almost certain it’s being used in conjunction with any CSS in those menus.

Both sets of sub menus underneath Portfolio and Projects are wrapped in a DIV with the class of “subnav”, but for some reason the sub menu items under Projects specifically have a unique ID as well, which appears to be auto generated.

[paulob]

Hi,

Just set the subnav to height:auto and use !important to over-ride the inline styles that are applied with js.

e.g.

.subnav{height:auto!important}

[Historical Forums User]

Thank you!

Both Paulob and Ed’s code worked!

Thanks!

[amydewolfe]

Hey Guys,

I would like to do this same thing, and am wondering… how/where do I add the code?

.subnav{height:auto!important}

Thanks for the help!

[amydewolfe]

I figured out where to add it, but it isn’t working for me… can anyone have a look at http://www.kombuchabrewhouse.squarespace.com and let me know if they can help?

Ideally I’d like:

1. To have the folder name “Home” display the full page (/home – which is currently the “Products” link on the dropdown list).
2. Then, when you are on the home page, I’d like the dropdown list to stay expanded and stay expanded if you click the anchor links making up the rest of the dropdown links.
3. When you visit other pages of the site, the dropdown can close up again.

[amydewolfe]

Well, using Tom’s code, I actually got the menu to stay open. I even set it like this, so that it would just be open on the home page and not when you’re on unrelated pages of the site:

page-id #main-navigation ul ul {

 display: block !important;

}

What I am having trouble with now, is just having my “Home” (which right now is the Folder name and appears at the top of the list of anchor tags, but is not an active link to the /index page) actually work as the home page so I can get rid of the actual page, which is currently “Products”. I just want to have home appear with the “products” page content and the list of anchors. I don’t want the actual word “Products” to appear in the expanded list of menu items.

[leeaho]

I am having the same issue. I tried looking at your site Amy, but the link isn’t working. I would love to see if you were trying to accomplish the same thing I am.

[Paulie_D]

If you start a new thread…this one is quite old..perhaps with a link we can take a look.

[leeaho]

Thanks Paulie_D, just did. :)

[Author]

Posts