diff --git a/css/structure.css b/css/structure.css
new file mode 100644
index 0000000..ee20343
--- /dev/null
+++ b/css/structure.css
@@ -0,0 +1,4 @@
+.chapter-image{
+    height: 4em;
+    width: 4em;
+}
diff --git a/img/firefox.png b/img/firefox.png
new file mode 100644
index 0000000..934fdde
Binary files /dev/null and b/img/firefox.png differ
diff --git a/js/javascript.js b/js/javascript.js
new file mode 100644
index 0000000..e69de29
diff --git a/main.html b/main.html
index a6e695c..881b741 100644
--- a/main.html
+++ b/main.html
@@ -10,22 +10,52 @@
         <script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
         <script src="js/javascript.js"></script>
         <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
+        <link href="css/structure.css" rel="stylesheet">
+        <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
+        <!-- Le javascript
+        ================================================== -->
+        <!-- Placed at the end of the document so the pages load faster -->
+        <script src="bootstrap/js/bootstrap.js"></script>
 
     </head>
     <body>
         <div class="navbar">
             <div class="navbar-inner">
                 <div class="container">
-                    <ul class="nav">
-                        <li class="active">
-                        <a class="image-link"  >
-                            <img src="img/CERNlogo.gif" >
-                            <p>Subtitle</p>
-                        </a>
-                        </li>
-                        <li><a href="#">Link</a></li>
-                        <li><a href="#">Link</a></li>
-                    </ul>
+                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </a>
+                    <div class="nav-collapse">
+
+                        <ul class="nav">
+                            <li class="active">
+                            <a class="image-link"  >
+                                <img class="chapter-image" src="img/firefox.png" >
+                                <p>Subtitle</p>
+                            </a>
+                            </li>
+                            <li class="">
+                            <a class="image-link"  >
+                                <img class="chapter-image" src="img/firefox.png" >
+                                <p>Subtitle</p>
+                            </a>
+                            </li>
+                            <li class="">
+                            <a class="image-link"  >
+                                <img class="chapter-image" src="img/firefox.png" >
+                                <p>Subtitle</p>
+                            </a>
+                            </li>
+                            <li class="">
+                            <a class="image-link"  >
+                                <img class="chapter-image" src="img/firefox.png" >
+                                <p>Hide it!</p>
+                            </a>
+                            </li>
+                        </ul>
+                    </div>
 
                 </div>
             </div>
@@ -38,8 +68,10 @@
         <div id="right-hidden">
         </div>
         <script>
-            //$("p.image-link").attr('diplay', 'none');
-
+            $(".collapse").collapse();
+            $(".navbar-inner").hover(function(){
+                $(this).height('0.2em');
+            },function(){});
         </script>
     </body>
 </html>
