Enterprise Child Theme: Dropdowns on nav disappearing upon position: fixed

[HollyCandC]

Hello all!

I'd like to make my #nav a fixed element along the top of the page, like Mashable.com's main nav (the blue one, not the white nav sticky upon scroll), but when I position:fix the #nav elements my dropdowns no longer appear. Any clue what I'm missing?

http://colesandcolomy.com/

Thanks!

I'm using:
Wordpress 3.6
Genesis 1.9.1
Enterprise 1.1

http://colesandcolomy.com/

[David Chu]

Hi Holly,
First, let me say that your design really looks great! The dashes, the logo, etc., very nice.

The fixed thing is an interesting idea. I have a quick answer that may get you started. In your CSS for the #nav DIV, you have this in there:

overflow: hidden;

This will tend to "erase" the dropdowns when "fixed" is applied. The question becomes, why does it work when it's not fixed? I'm not sure without tearing the code apart and examining it, but it may be a context thing. So you can try taking that line out, and then you'll be on your way.

Obviously there will be a few more CSS tweaks in getting the fixed menu in the right spot and all, but it sounds like you're up to it!

You could also try playing with this.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[HollyCandC]

That was it! Haha, I knew it was going to be one little line. That's one rule that I'm never going to forget again.

Thanks for the praise and your help, Dave. You get a gold star for being awesome!

[David Chu]

Holly,
Thank you for your kind words, glad that helped! I'd like to see your site again with the fixed thingie on it.

Yeah, Genesis 1.9, at least its Sample theme, has loads of those "overflow: hidden" deals. So many that one can forget they are there, and end up scratching one's head, as we did. With that many, and some not obviously needed, I think they were shooting for the whole "fix the collapsing margin" thing that CSS people have discussed at length.

Brian Gardner had an article about making a sticky menu, and it had this really graceful approach, so that as you scrolled down, it would fade in at the top, and then fade out again after going back to the top. But I don't see it on his site now. Then again, I don't think the techniques are necessarily Genesis-specific, so a web search on that general topic should yield a bunch of ideas.

Best, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[HollyCandC]

I had heard of that link in my searching last night, but I also saw it was no longer on his page. Hopefully it will be restored, since everyone raved about it.

The menu is fixed and I am pleased. Thanks again for the help!

http://colesandcolomy.com/

[David Chu]

Ooo, snap, that's looking great!!
You didn't hear this from me, but this looks considerably better than most of the other sites I've been seeing these days! Bonus - dropdowns look just dandy at small screen size. If I get some extra time, I may play with this sort of menu.

As for Brian's article, he admits that he's addicted to updating his site every 47 minutes or so. So it may have gotten lost in the theme shuffle. As I recall, some new issues came up with the tut working with some Genesis themes, so maybe the article got put aside.

Talk again sometime!
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts