Grow your CSS skills. Land your dream job.

Using CSS To Keep Text Dropdown Menu Open…

  • # November 15, 2013 at 7:29 am

    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!

    # November 15, 2013 at 8:05 am

    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.

    # November 15, 2013 at 8:10 am

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

    # November 15, 2013 at 10:27 am

    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.

    # November 15, 2013 at 10:43 am

    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.

    # November 15, 2013 at 11:10 am

    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.

    # November 16, 2013 at 9:21 am

    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}
    
    Ed
    # November 16, 2013 at 10:58 am

    You might also need to add opacity: 1 to the CSS @paulob suggested, like so:

    div.subnav {
        height: auto !important;
        opacity: 1 !important;
    }
    

    I suggest this because whatever JS they use to make the dropdown appear when clicked adds both a fixed height value andopacity: 1, so adding both seems the best way to ensure it works as you want.

    # November 17, 2013 at 4:01 pm

    Thank you!

    Both Paulob and Ed’s code worked!

    Thanks!

    # February 16, 2014 at 2:07 pm

    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!

    # February 16, 2014 at 2:37 pm

    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.
    # February 17, 2014 at 7:11 pm

    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.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".