Last Updated: September 29, 2021
·
102.8K
· micjamking

Navigataur: A pure CSS responsive navigation menu

Navigataur is a simple CSS snippet for stylish responsive navigation menus.

To use navigataur.css, reference the stylesheet in the <head></code> of your document (or you can place within your own stylesheet). To work out of the box, you will need the following adjustments to your markup (classes can be changed in the stylesheet if you use something different):

  • An outer <div></code> with a class of header
  • An input[type=checkbox]</code> with an ID of toggle</code> and label[for=toggle]</code> with a class of toggle</code> just above your list menu.
  • A list menu (either ul or ol) with a class of menu

Example Setup:


<input type='checkbox' id='toggle'/> <label for='toggle' class='toggle'></label> <ul class="menu"> <li><a href="#">Google</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Youtube</a></li> <li><a href="#">Twitter</a></li> </ul> </code> </pre> That’s it! Everything works out of the box with this setup. However, like any CSS plugin/snippet, you will probably want to stylize it to match your sites theme. I’ve separated all functional CSS from the presentational CSS so you can jump right in and change everything you need without breaking the plugin. Just edit as needed below the following CSS comment: /*-------------------------------- Presentation Styles (Editable) ---------------------------------*/ Support WebKit rendering engine makes up the vast majority of mobile browsers (iOS, Android, Nokia), so you can expect the same level of support for mobile browsing as you see in Chrome/Safari. Chrome 16.0+ Safari 5.1+ Firefox 4.0+ Opera 12 IE9* iOS 4.0+ Android 2.2+ Internet Explorer 8 and below do not support media queries. If you need support for legacy IE versions, you can use an IE specific stylesheet to provide some styling support. Live Demo: http://micjamking.github.com/Navigataur/ Github Repo: https://github.com/micjamking/Navigataur

17 Responses
Add your response

Awesome! I'm going to look into this to see, if I can integrate it into crystallo! Thanks.

over 1 year ago ·

@timpietrusky Awesome man! Let me know how it goes and if you see any issues/bugs.

over 1 year ago ·

Brilliant! Thanks Mike!

over 1 year ago ·

Looks nice, i'll give it a go on my companys new side project !

over 1 year ago ·

thanks, i integrate this menu into my new Wordpress custom theme.

over 1 year ago ·

@Wanville: Awesome! Glad you got some use out of it!

over 1 year ago ·

Yes, it is really great, easy way to responsive navigation. Thanks:)

over 1 year ago ·

hi, i ve put the css and this ....
<div id="header" class="parentContainer container">
<div class="header clearfix">

          <h1>Santoro<span>Francesco.</span></h1>
        <div class="nav">
        <input type="checkbox" id="toggle">
        <label for="toggle" class="toggle"></label>
                    <ul class="menu">
                            <li>
                            <a href="#ancla1">home</a>
                            </li>
                             <li>
                            <a href="#ancla4">work</a>
                            </li>
                            <li>
                            <a href="#ancla5">services</a>
                            </li>
                            <li>
                            <a href="#ancla6">contact</a>
                            </li>

                            </ul>
              </div>
       </div>

</div> <!-- end header-->

into my html but when i scale the page ( smartphone portrait ) on click the menu does't appears and doesn't appear the " main menu" text. only blue bar.
any solution please ?

over 1 year ago ·

can you please help making it clickable (for mobile devices) with sub menus??

over 1 year ago ·

Yeah - i was messing with the downloadable CSS but it's missing a few things. And like Syedaliaziz and fraom the menu didn't work in mobile view. I just found the CSS used in the example and used that instead of the downloadable version: http://micjamking.github.io/Navigataur/navigataur.css

over 1 year ago ·

Same issue as with danlovesadobe, Syedaliaziz and froam. So I also took danlovesadobe's suggestion and took the css direct from the example.

Seems you're missing about 30 lines from the github version...

over 1 year ago ·

Wow! Just great! Thanks so much

over 1 year ago ·

Hey, Mike!

I'm using your CSS menu and it works awesome. I changed some stuff in the layout, and was wondering: how should I proceed if I want the menu to close automaGically after I click a link?

Thank you very much for this! :D

over 1 year ago ·

Hey Mike,

great bit of coding, I was wondering the data-open and data-close those values equal the text you see to open and close can an image be added? like a menu icon?

over 1 year ago ·

Really nice work. will try using this.

over 1 year ago ·

cool

over 1 year ago ·

It's cool but not right - doesn't work on mobile and you're using form elements outside of their context.

over 1 year ago ·