Can CSS Achieve this Effect?

[CJSweatt]

I recently ran across a navigation menu that a client wanted to incorporate in a project, but I quickly found out that the JS clashes, and it’s breaking another element on the site.

I was wondering whether this sliding effect could just as easily be accomplished with CSS rather than JS? Here’s the link to the menu: http://testing.volunteerhattiesburg.org/navTest

It seems like it could possibly be a simple change over to all CSS? Any help would be greatly appreciated.

[CJSweatt]

Oh wow! Thanks so much for the help. It looks great in code pen, but when I implemented it on a blank html page, the background is positioned too low. Here’s the live example (testing.volunteerhattiesburg.org/cssNav). It’s so strange, and I don’t know why it happens.

[i3iorn]

At quick glance I am thinking that you have not reset the margin and or padding on one or more of the elements. I have not used codepen alot so I do not know if it uses the same default values as your browser typicaly does. Try setting the universal selector with margin and padding 0px.

[CJSweatt]

YES! Just tried that in firebug, and that fixed it! Thanks so much!

Much appreciated!

[i3iorn]

Add margin: 0px to the “#nav li a p” selector. Does the trick.

[Author]

Posts