A near perfect (and customizable) replica of Apple's navigation bar for Bootstrap.
- Install Bootstrap and set up your navigation bar
- Set up your navbar as
navbar-inverseNote: it MUST benavbar-inverse - Clone this repository
- Put the
applnavfolder into the folder where your site's resources are - Add this line After the Bootstrap CSS import, but Before your custom CSS import in the
<head>section:
<link href="YourResourcesPath/applenav/applenav.css" rel="stylesheet">- Then, add this line After the Bootstrap JavaScript import, but Before your custom JavaScript import in the
<body>section:
<script src="YourResourcesPath/applenav/applenav.js"></script>Create your own CSS file, and edit the navbar just like you would the stock Bootstrap navbar.
If you need to know what properties of what class to edit, you can look at the applenav.css and applenav.js files.
NOTE: Do NOT directly edit the applenav.css and applenav.js files. You can do all the customization you need from your own CSS files.
- On mobile, the dropdown animation is too fast.
- This is an issue with Bootstrap. Changing animation speeds results in a choppy animation.
Applenav is licensed with the MIT License, which is reproduced in the LICENSE file. Attribution is technically required, and very much appreciated.
I enjoy seeing how others use my code! If your site uses Applenav, I'd love to check it out - you can send me a link at these places:
Twitter:
@TheTomMetzger
Email:
Tom@Southernerd.us