Add a placeholder logo and favicon so it's apparent where they'll show up, add a light text colour to the less variables, and add more realistic default styling for the nav

resources/assets/less/elements/nav.less

@@ -1,3 +1,39 @@
-nav {
+nav.navbar {
+    background-color: @c_base;
     z-index: 1;
+
+    .navbar-logo {
+        top: 25px;
+        left: 15px;
+        width: 150px;
+        height: 150px;
+        background-image: url('/img/logo.png');
+        background-size: contain;
+        background-position: center center;
+        background-repeat: no-repeat;
+    }
+
+    #navbar {
+        box-shadow: none;
+        border: none;
+
+        ul.nav {
+            li {
+                a {
+                    color: @c_text_light;
+                    font-weight: bold;
+                    text-decoration: none;
+                }
+
+                &:hover a { color: @c_text; }
+                &.active a { color: @c_text; }
+                &.active a, &.active:hover a, &:hover a, &:focus a { background-color: transparent; }
+            }
+        }
+    }
+
+    .navbar-toggle {
+        border: none;
+        &, &:hover, &:focus { background-color: transparent; }
+     }
 }

resources/assets/less/var.less

@@ -4,6 +4,8 @@
  |
  */
 
-@c_text: #111; // text colour
+// Colours
-@c_base: #0088cc; // base colour
+@c_text:       #111; // text
-@c_accent: #f5f5f5; // accent colour
+@c_text_light: #fff; // light text
+@c_base:       #0088cc; // base
+@c_accent:     #f5f5f5; // accent

resources/views/elements/nav.blade.php

@@ -7,26 +7,13 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand" href="#">Hypothetical Creations</a>
+            <div class="navbar-logo"></div>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav navbar-right">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
-                    <ul class="dropdown-menu">
-                        <li class="dropdown-header">Section A</li>
-                        <li><a href="#">Dropdown Option A1</a></li>
-                        <li><a href="#">Dropdown Option A2</a></li>
-                        <li><a href="#">Dropdown Option A3</a></li>
-                        <li role="separator" class="divider"></li>
-                        <li class="dropdown-header">Section B</li>
-                        <li><a href="#">Dropdown Option B1</a></li>
-                        <li><a href="#">Dropdown Option B2</a></li>
-                    </ul>
-                </li>
             </ul>
         </div>
     </div>