Grow your CSS skills. Land your dream job.

Help with Navigations Dropdown Element

  • # December 28, 2012 at 2:23 pm

    Hey y’all!

    I rarely run across this issue, so I’m not really sure how to deal with it. I’m using the Genesis framework for a concept site, and am having trouble with the secondary “ul” (dropdown) of an “li” element.

    If you go here [Concept Site](http://mud.cleartouchvisuals.com/ “Concept Site”), and hover over “Chromatics”, you’ll see what I mean.

    The dropdown element has acquired the height value from the parent anchor before it. I cannot for the life of me figure out how to clear it from there. I attempted to set the height of the dropdown to “auto” with the “!important” tag, but it didn’t work.

    You can see form the css that I have it how I want it width wise, I just can’t figure out the height thing.

    Any help is appreciated. And if my problem lies elsewhere, please let me know.

    # December 28, 2012 at 3:29 pm

    @psionicsin, I think you’re targeting the wrong element. Looking at the inspector, your submenu height is being styled by `.menu-primary a`…I got it by adding `.sub-menu a { height: auto; }`

    # December 28, 2012 at 3:33 pm

    @ChrisP

    I don’t see that class anywhere. Did you add the class and THEN style it? Because attempting to do that resulted in nothing.

    # December 28, 2012 at 3:34 pm

    Ahh ok found the class, lol sorry.

    But yeah it’s not doing anything for me

    # December 28, 2012 at 3:53 pm

    @psionicsin, it’s in your css as `.menu-primary a, #header .menu a` I added the rule `.sub-menu a` and I’m sorry, it’s the min-height that you need to change, not height..it’s pulling `min-height:55px;` from the parent element

    # December 28, 2012 at 4:08 pm

    @ChrisP

    Ok I see what you mean now. How’d I even miss that lol?

    I use Chrome to develop while viewing the changes in Safari and for some reason Safari wasn’t displaying the changes. And Safari on my iPad isn’t showing the changes either.

    BTW speaking of iPad…would you happen to know why my iPad isn’t displaying the whole site upon loading? It’s almost like it’s zoomed in 100% and only up to the “R” in “References” in the nav menu is displayed. After that I have to scroll over to see the rest. Odd behavior seeing as how usually an iPad hows a 100% zoomed out view of the whole site.

    # December 28, 2012 at 4:19 pm

    @psionicsin, I have no idea what that could be from, and I don’t have an ipad, so I can’t see what you’re seeing either.

    I do know iOS had a bug on device rotation from landscape to portrait or vice versa, but I think that’s been fixed.

    # December 28, 2012 at 4:19 pm

    Ok. Thanks for your help.

    # December 28, 2012 at 4:21 pm

    @psionicsin, also…see [http://css-tricks.com/forums/discussion/15236/solved-ipad-zoom-problems](http://css-tricks.com/forums/discussion/15236/solved-ipad-zoom-problems “”)

    # December 28, 2012 at 5:56 pm

    @ChrisP

    Thanks for that, but sadly I don’t think that can apply to be. The Genesis Framework, while great, is very hard to customize as it depends greatly on hooks instead of letting users just copy and paste the original themes PHP files for alterations. (which then begs the questions on why it’s called an artist friendly framework lol??)

    # December 28, 2012 at 5:57 pm

    This might be a Mac specific problem, but can anyone check the site out on your own Safari and then Chrome/FF and tell me why Safari is not receiving the min-height: auto; property??

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

You must be logged in to reply to this topic.

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