jonaspelzer does not currently provide support for this item.

13 comments found.


is it completely made with css?

Yes, the navigation bar is made out of pure CSS . The only image contained in the ZIP file is the background pattern for the example site.

ive bought the last 2 items .. there good for future projects ‘Thanx :)

You’re welcome. :)

This is a great item works very good. 5 stars given and worth buying! Also great developer delivers good and fast support as I experienced myself.

shame that this does not work in IE :(

What version are you using? It should work in IE9 .

What would be the best path to to take in order to have the “open” state as default (on page load), then allowing “close” to close it if not wanted?

Can you advise on what CSS hackery would be the best to modify?

  1. Open “nav.css”.
  2. Change “top: -60px;” in line 15 to “top: 0;”
  3. Change “top: 0;” in line 23 to “top: -60px;”
  4. Now open the HTML file and change the word “Menu” to “Close” and the other way around.

I hope I could help!

I see that linking to url/#navbar actually does load the page with the navbar open. Is this it proper to link to the anchor in such a way? Is there any browser support issues in using that?

By the way, this is a magnificent product. Thanks for making it available. Finally some quality coding that works without having to troubleshoot integration issues. this is just copy, paste and enjoy!

Ps – Do you do any freelancing?

Thanks for your comment, I’m really glad you like my work!

The navbar thing is done using the CSS3 :target pseudo-class. This is quite a modern technique and not supported in older browsers such as old IE versions. There are no issues in modern browsers though.

Yes, I also do freelance design and development. Feel free to contact me anytime.

thanks for a great Appearing Navigation Bar

I was wondering if it is possible to have sub menu?

Do you mean a dropdown menu? If yes, try this tutorial:

Hi I have a bit of a problem, all is working well except on the ipad, the menu button (circle) get distorted and shows only half of the circle? amy help?

thanks kenny

Hmm I haven’t experienced that yet. Try replacing the button’s margin-top value (it’s in line 33) with a bigger one.

Hello, before buying the menu I was wondering if it supports drop down or if is there an easy way to do it.


It’s not implemented yet, but you can do it very easily using this tutorial:

Before I buy this I just wanted to know if it’s possible to add one of the drop down menus within the Appearing Nav…

Like this drop down for instance //

That would be pretty cool for people that have larger navigation content and would like to shorten it by using the drop down..

It’s not supported yet, but you can implement it easily:

It’s not supported yet, but you can implement it easily:


just realized that your nav bar doesn’t work with newest opera 12.12.

any idea why?

SORRY, found the mistake. my fault!!!


The button stay fixed/static with Firefox 20 but works with IE 10 (both with Win8 ). Any tip to resolve this ?


So, i’ve just tested online and on a wamp server, always didn’t work. The nav bar move down (without the slide effect) but the button stay static.

This works correctly with IE and Chrome, only a problem with FF. I don’t have changed anything, just tested from the original file v1.1). Regards.


I’ve sent a private email with the link to my site as well as some additional explanations. Regards.

ok, i showed the CSS 2 minutes and i think you have tested with chrome ( i refer to the -webkit commands).

Here is how to correct the slide effect of the nav bar for FF and IE : you need to write in the nav#navbar class : -moz-transition: top .4s; -o-transition: top .4s; transition: top .4s; (there is only the -webkit-transition atm).

I unfortunately did not have time to find the rest tonight but I think the problem should be similar to the button. I’m trying to fix that quickly.

Do you mean a drop down navigation menu that’s purely built in CSS then you can try this tutorial. Link: